</div>
  );
}
```

## Source

### ui/textarea.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { Textarea } from "@/components/amro/components/input";
export type { TextareaProps } from "@/components/amro/components/input";
```

## Usage

A configurable, accessible textarea surface for AI product workflows.

### Package

```tsx
import { Textarea } from "@amro-ui/react";

<Textarea />
```

### shadcn copy

```tsx
import { Textarea } from "@/components/ui/textarea";

<Textarea />
```

---

URL: https://amro-ui.vercel.app/components/theme-segmented-toggle.md

A configurable, accessible theme segmented toggle surface for AI product workflows.

# Theme Segmented Toggle

A configurable, accessible theme segmented toggle surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/theme-segmented-toggle.json
```

[Registry JSON](https://amro-ui.vercel.app/r/theme-segmented-toggle.json)

## Preview

```tsx
import { ThemeSegmentedToggle } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <ThemeSegmentedToggle />
    </div>
  );
}
```

## Source

### ui/theme-segmented-toggle.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { ThemeSegmentedToggle } from "@/components/amro/components/theme-segmented-toggle";
export type { ThemeSegmentedToggleProps } from "@/components/amro/components/theme-segmented-toggle";
```

## Usage

A configurable, accessible theme segmented toggle surface for AI product workflows.

### Package

```tsx
import { ThemeSegmentedToggle } from "@amro-ui/react";

<ThemeSegmentedToggle />
```

### shadcn copy

```tsx
import { ThemeSegmentedToggle } from "@/components/ui/theme-segmented-toggle";

<ThemeSegmentedToggle />
```

---

URL: https://amro-ui.vercel.app/components/time-input.md

A configurable, accessible time input surface for AI product workflows.

# Time Input

A configurable, accessible time input surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/time-input.json
```

[Registry JSON](https://amro-ui.vercel.app/r/time-input.json)

## Preview

```tsx
import { TimeInput } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TimeInput aria-label="Meeting time" defaultValue="10:30" />
    </div>
  );
}
```

## Source

### ui/time-input.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TimeInput } from "@/components/amro/components/input";
export type { TimeInputProps } from "@/components/amro/components/input";
```

## Usage

A configurable, accessible time input surface for AI product workflows.

### Package

```tsx
import { TimeInput } from "@amro-ui/react";

<TimeInput />
```

### shadcn copy

```tsx
import { TimeInput } from "@/components/ui/time-input";

<TimeInput />
```

---

URL: https://amro-ui.vercel.app/components/time-slot-list.md

A configurable, accessible time slot list surface for AI product workflows.

# Time Slot List

A configurable, accessible time slot list surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/time-slot-list.json
```

[Registry JSON](https://amro-ui.vercel.app/r/time-slot-list.json)

## Preview

```tsx
import { TimeSlotList } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TimeSlotList />
    </div>
  );
}
```

## Source

### ui/time-slot-list.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TimeSlotList } from "@/components/amro/components/meeting";
export type { TimeSlotListProps } from "@/components/amro/components/meeting";
```

## Usage

A configurable, accessible time slot list surface for AI product workflows.

### Package

```tsx
import { TimeSlotList } from "@amro-ui/react";

<TimeSlotList />
```

### shadcn copy

```tsx
import { TimeSlotList } from "@/components/ui/time-slot-list";

<TimeSlotList />
```

---

URL: https://amro-ui.vercel.app/components/timezone-pill.md

A configurable, accessible timezone pill surface for AI product workflows.

# Timezone Pill

A configurable, accessible timezone pill surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/timezone-pill.json
```

[Registry JSON](https://amro-ui.vercel.app/r/timezone-pill.json)

## Preview

```tsx
import { TimezonePill } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TimezonePill />
    </div>
  );
}
```

## Source

### ui/timezone-pill.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TimezonePill } from "@/components/amro/components/meeting";
export type { TimezonePillProps } from "@/components/amro/components/meeting";
```

## Usage

A configurable, accessible timezone pill surface for AI product workflows.

### Package

```tsx
import { TimezonePill } from "@amro-ui/react";

<TimezonePill />
```

### shadcn copy

```tsx
import { TimezonePill } from "@/components/ui/timezone-pill";

<TimezonePill />
```

---

URL: https://amro-ui.vercel.app/components/tooltip.md

A configurable, accessible tooltip surface for AI product workflows.

# Tooltip

A configurable, accessible tooltip surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/tooltip.json
```

[Registry JSON](https://amro-ui.vercel.app/r/tooltip.json)

## Preview

```tsx
import { Tooltip, Button } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <Tooltip content="Helpful context"><Button variant="secondary">Focus me</Button></Tooltip>
    </div>
  );
}
```

## Source

### ui/tooltip.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { Tooltip } from "@/components/amro/components/tooltip";
export type { TooltipProps } from "@/components/amro/components/tooltip";
```

## Usage

A configurable, accessible tooltip surface for AI product workflows.

### Package

```tsx
import { Tooltip } from "@amro-ui/react";

<Tooltip />
```

### shadcn copy

```tsx
import { Tooltip } from "@/components/ui/tooltip";

<Tooltip />
```

---

URL: https://amro-ui.vercel.app/components/topic-to-course-composer.md

A configurable, accessible topic to course composer surface for AI product workflows.

# Topic To Course Composer

A configurable, accessible topic to course composer surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/topic-to-course-composer.json
```

[Registry JSON](https://amro-ui.vercel.app/r/topic-to-course-composer.json)

## Preview

```tsx
import { TopicToCourseComposer } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TopicToCourseComposer />
    </div>
  );
}
```

## Source

### ui/topic-to-course-composer.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TopicToCourseComposer } from "@/components/amro/components/learning";
export type { TopicToCourseComposerProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible topic to course composer surface for AI product workflows.

### Package

```tsx
import { TopicToCourseComposer } from "@amro-ui/react";

<TopicToCourseComposer />
```

### shadcn copy

```tsx
import { TopicToCourseComposer } from "@/components/ui/topic-to-course-composer";

<TopicToCourseComposer />
```

---

URL: https://amro-ui.vercel.app/components/trust-pattern-warning.md

A configurable, accessible trust pattern warning surface for AI product workflows.

# Trust Pattern Warning

A configurable, accessible trust pattern warning surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/trust-pattern-warning.json
```

[Registry JSON](https://amro-ui.vercel.app/r/trust-pattern-warning.json)

## Preview

```tsx
import { TrustPatternWarning } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TrustPatternWarning />
    </div>
  );
}
```

## Source

### ui/trust-pattern-warning.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TrustPatternWarning } from "@/components/amro/components/editorial";
export type { TrustPatternWarningProps } from "@/components/amro/components/editorial";
```

## Usage

A configurable, accessible trust pattern warning surface for AI product workflows.

### Package

```tsx
import { TrustPatternWarning } from "@amro-ui/react";

<TrustPatternWarning />
```

### shadcn copy

```tsx
import { TrustPatternWarning } from "@/components/ui/trust-pattern-warning";

<TrustPatternWarning />
```

---

URL: https://amro-ui.vercel.app/components/trusted-knowledge-card.md

Approved knowledge collections with document counts, freshness, review state, and source management.

# Trusted Knowledge Card

Approved knowledge collections with document counts, freshness, review state, and source management.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/trusted-knowledge-card.json
```

[Registry JSON](https://amro-ui.vercel.app/r/trusted-knowledge-card.json)

## Preview

```tsx
import { TrustedKnowledgeCard } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TrustedKnowledgeCard />
    </div>
  );
}
```

## Source

### ui/trusted-knowledge-card.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TrustedKnowledgeCard } from "@/components/amro/components/agents";
export type { TrustedKnowledgeCardProps } from "@/components/amro/components/agents";
```

## Usage

Approved knowledge collections with document counts, freshness, review state, and source management.

### Package

```tsx
import { TrustedKnowledgeCard } from "@amro-ui/react";

<TrustedKnowledgeCard />
```

### shadcn copy

```tsx
import { TrustedKnowledgeCard } from "@/components/ui/trusted-knowledge-card";

<TrustedKnowledgeCard />
```

---

URL: https://amro-ui.vercel.app/components/tutor-conversation-panel.md

A configurable, accessible tutor conversation panel surface for AI product workflows.

# Tutor Conversation Panel

A configurable, accessible tutor conversation panel surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/tutor-conversation-panel.json
```

[Registry JSON](https://amro-ui.vercel.app/r/tutor-conversation-panel.json)

## Preview

```tsx
import { TutorConversationPanel } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TutorConversationPanel />
    </div>
  );
}
```

## Source

### ui/tutor-conversation-panel.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TutorConversationPanel } from "@/components/amro/components/learning";
export type { TutorConversationPanelProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible tutor conversation panel surface for AI product workflows.

### Package

```tsx
import { TutorConversationPanel } from "@amro-ui/react";

<TutorConversationPanel />
```

### shadcn copy

```tsx
import { TutorConversationPanel } from "@/components/ui/tutor-conversation-panel";

<TutorConversationPanel />
```

---

URL: https://amro-ui.vercel.app/components/tutor-memory-panel.md

A configurable, accessible tutor memory panel surface for AI product workflows.

# Tutor Memory Panel

A configurable, accessible tutor memory panel surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/tutor-memory-panel.json
```

[Registry JSON](https://amro-ui.vercel.app/r/tutor-memory-panel.json)

## Preview

```tsx
import { TutorMemoryPanel } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TutorMemoryPanel />
    </div>
  );
}
```

## Source

### ui/tutor-memory-panel.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TutorMemoryPanel } from "@/components/amro/components/learning";
export type { TutorMemoryPanelProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible tutor memory panel surface for AI product workflows.

### Package

```tsx
import { TutorMemoryPanel } from "@amro-ui/react";

<TutorMemoryPanel />
```

### shadcn copy

```tsx
import { TutorMemoryPanel } from "@/components/ui/tutor-memory-panel";

<TutorMemoryPanel />
```

---

URL: https://amro-ui.vercel.app/components/tutor-response-card.md

A configurable, accessible tutor response card surface for AI product workflows.

# Tutor Response Card

A configurable, accessible tutor response card surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/tutor-response-card.json
```

[Registry JSON](https://amro-ui.vercel.app/r/tutor-response-card.json)

## Preview

```tsx
import { TutorResponseCard } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <TutorResponseCard />
    </div>
  );
}
```

## Source

### ui/tutor-response-card.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { TutorResponseCard } from "@/components/amro/components/learning";
export type { TutorResponseCardProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible tutor response card surface for AI product workflows.

### Package

```tsx
import { TutorResponseCard } from "@amro-ui/react";

<TutorResponseCard />
```

### shadcn copy

```tsx
import { TutorResponseCard } from "@/components/ui/tutor-response-card";

<TutorResponseCard />
```

---

URL: https://amro-ui.vercel.app/components/understanding-check.md

A configurable, accessible understanding check surface for AI product workflows.

# Understanding Check

A configurable, accessible understanding check surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/understanding-check.json
```

[Registry JSON](https://amro-ui.vercel.app/r/understanding-check.json)

## Preview

```tsx
import { UnderstandingCheck } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <UnderstandingCheck />
    </div>
  );
}
```

## Source

### ui/understanding-check.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { UnderstandingCheck } from "@/components/amro/components/learning";
export type { UnderstandingCheckProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible understanding check surface for AI product workflows.

### Package

```tsx
import { UnderstandingCheck } from "@amro-ui/react";

<UnderstandingCheck />
```

### shadcn copy

```tsx
import { UnderstandingCheck } from "@/components/ui/understanding-check";

<UnderstandingCheck />
```

---

URL: https://amro-ui.vercel.app/components/variation-controls.md

A configurable, accessible variation controls surface for AI product workflows.

# Variation Controls

A configurable, accessible variation controls surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/variation-controls.json
```

[Registry JSON](https://amro-ui.vercel.app/r/variation-controls.json)

## Preview

```tsx
import { VariationControls } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <VariationControls />
    </div>
  );
}
```

## Source

### ui/variation-controls.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { VariationControls } from "@/components/amro/components/generation";
export type { VariationControlsProps } from "@/components/amro/components/generation";
```

## Usage

A configurable, accessible variation controls surface for AI product workflows.

### Package

```tsx
import { VariationControls } from "@amro-ui/react";

<VariationControls />
```

### shadcn copy

```tsx
import { VariationControls } from "@/components/ui/variation-controls";

<VariationControls />
```

---

URL: https://amro-ui.vercel.app/components/voice-conversation-dock.md

A configurable, accessible voice conversation dock surface for AI product workflows.

# Voice Conversation Dock

A configurable, accessible voice conversation dock surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/voice-conversation-dock.json
```

[Registry JSON](https://amro-ui.vercel.app/r/voice-conversation-dock.json)

## Preview

```tsx
import { VoiceConversationDock } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <VoiceConversationDock status="speaking" elapsedLabel="01:24" />
    </div>
  );
}
```

## Source

### ui/voice-conversation-dock.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { VoiceConversationDock } from "@/components/amro/components/conversational";
export type { VoiceConversationDockProps } from "@/components/amro/components/conversational";
```

## Usage

A configurable, accessible voice conversation dock surface for AI product workflows.

### Package

```tsx
import { VoiceConversationDock } from "@amro-ui/react";

<VoiceConversationDock />
```

### shadcn copy

```tsx
import { VoiceConversationDock } from "@/components/ui/voice-conversation-dock";

<VoiceConversationDock />
```

---

URL: https://amro-ui.vercel.app/components/voice-lesson-player.md

A configurable, accessible voice lesson player surface for AI product workflows.

# Voice Lesson Player

A configurable, accessible voice lesson player surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/voice-lesson-player.json
```

[Registry JSON](https://amro-ui.vercel.app/r/voice-lesson-player.json)

## Preview

```tsx
import { VoiceLessonPlayer } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <VoiceLessonPlayer />
    </div>
  );
}
```

## Source

### ui/voice-lesson-player.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { VoiceLessonPlayer } from "@/components/amro/components/learning";
export type { VoiceLessonPlayerProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible voice lesson player surface for AI product workflows.

### Package

```tsx
import { VoiceLessonPlayer } from "@amro-ui/react";

<VoiceLessonPlayer />
```

### shadcn copy

```tsx
import { VoiceLessonPlayer } from "@/components/ui/voice-lesson-player";

<VoiceLessonPlayer />
```

---

URL: https://amro-ui.vercel.app/components/voice-tutor-orb.md

A configurable, accessible voice tutor orb surface for AI product workflows.

# Voice Tutor Orb

A configurable, accessible voice tutor orb surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/voice-tutor-orb.json
```

[Registry JSON](https://amro-ui.vercel.app/r/voice-tutor-orb.json)

## Preview

```tsx
import { VoiceTutorOrb } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <VoiceTutorOrb />
    </div>
  );
}
```

## Source

### ui/voice-tutor-orb.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { VoiceTutorOrb } from "@/components/amro/components/learning";
export type { VoiceTutorOrbProps } from "@/components/amro/components/learning";
```

## Usage

A configurable, accessible voice tutor orb surface for AI product workflows.

### Package

```tsx
import { VoiceTutorOrb } from "@amro-ui/react";

<VoiceTutorOrb />
```

### shadcn copy

```tsx
import { VoiceTutorOrb } from "@/components/ui/voice-tutor-orb";

<VoiceTutorOrb />
```

---

URL: https://amro-ui.vercel.app/components/weak-draft-warning.md

A configurable, accessible weak draft warning surface for AI product workflows.

# Weak Draft Warning

A configurable, accessible weak draft warning surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/weak-draft-warning.json
```

[Registry JSON](https://amro-ui.vercel.app/r/weak-draft-warning.json)

## Preview

```tsx
import { WeakDraftWarning } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <WeakDraftWarning />
    </div>
  );
}
```

## Source

### ui/weak-draft-warning.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { WeakDraftWarning } from "@/components/amro/components/sales";
export type { WeakDraftWarningProps } from "@/components/amro/components/sales";
```

## Usage

A configurable, accessible weak draft warning surface for AI product workflows.

### Package

```tsx
import { WeakDraftWarning } from "@amro-ui/react";

<WeakDraftWarning />
```

### shadcn copy

```tsx
import { WeakDraftWarning } from "@/components/ui/weak-draft-warning";

<WeakDraftWarning />
```

---

URL: https://amro-ui.vercel.app/components/weekly-availability-grid.md

A configurable, accessible weekly availability grid surface for AI product workflows.

# Weekly Availability Grid

A configurable, accessible weekly availability grid surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/weekly-availability-grid.json
```

[Registry JSON](https://amro-ui.vercel.app/r/weekly-availability-grid.json)

## Preview

```tsx
import { WeeklyAvailabilityGrid } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <WeeklyAvailabilityGrid />
    </div>
  );
}
```

## Source

### ui/weekly-availability-grid.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { WeeklyAvailabilityGrid } from "@/components/amro/components/signature-flows";
export type { WeeklyAvailabilityGridProps } from "@/components/amro/components/signature-flows";
```

## Usage

A configurable, accessible weekly availability grid surface for AI product workflows.

### Package

```tsx
import { WeeklyAvailabilityGrid } from "@amro-ui/react";

<WeeklyAvailabilityGrid />
```

### shadcn copy

```tsx
import { WeeklyAvailabilityGrid } from "@/components/ui/weekly-availability-grid";

<WeeklyAvailabilityGrid />
```

---

URL: https://amro-ui.vercel.app/components/workflow-step-rail.md

A configurable, accessible workflow step rail surface for AI product workflows.

# Workflow Step Rail

A configurable, accessible workflow step rail surface for AI product workflows.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/workflow-step-rail.json
```

[Registry JSON](https://amro-ui.vercel.app/r/workflow-step-rail.json)

## Preview

```tsx
import { WorkflowStepRail } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <WorkflowStepRail />
    </div>
  );
}
```

## Source

### ui/workflow-step-rail.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { WorkflowStepRail } from "@/components/amro/components/signature-flows";
export type { WorkflowStepRailProps } from "@/components/amro/components/signature-flows";
```

## Usage

A configurable, accessible workflow step rail surface for AI product workflows.

### Package

```tsx
import { WorkflowStepRail } from "@amro-ui/react";

<WorkflowStepRail />
```

### shadcn copy

```tsx
import { WorkflowStepRail } from "@/components/ui/workflow-step-rail";

<WorkflowStepRail />
```

---

URL: https://amro-ui.vercel.app/utilities.md

Hooks, libraries, pages, files, themes, fonts, bases, styles, and other items.

# Utilities

Hooks, libraries, pages, files, themes, fonts, bases, styles, and other items.

- [AmroUI agents](https://amro-ui.vercel.app/utilities/amro-ui-agents): Installable AmroUI product component source.
- [AmroUI conversational](https://amro-ui.vercel.app/utilities/amro-ui-conversational): Installable AmroUI product component source.
- [AmroUI editorial](https://amro-ui.vercel.app/utilities/amro-ui-editorial): Installable AmroUI product component source.
- [AmroUI Foundation](https://amro-ui.vercel.app/utilities/amro-ui-foundation): Shared AmroUI primitives, design tokens, and component styling.
- [AmroUI generation](https://amro-ui.vercel.app/utilities/amro-ui-generation): Installable AmroUI product component source.
- [AmroUI learning](https://amro-ui.vercel.app/utilities/amro-ui-learning): Installable AmroUI product component source.
- [AmroUI meeting](https://amro-ui.vercel.app/utilities/amro-ui-meeting): Installable AmroUI product component source.
- [AmroUI sales](https://amro-ui.vercel.app/utilities/amro-ui-sales): Installable AmroUI product component source.
- [AmroUI shared](https://amro-ui.vercel.app/utilities/amro-ui-shared): Installable AmroUI product component source.
- [AmroUI signature Flows](https://amro-ui.vercel.app/utilities/amro-ui-signature-flows): Installable AmroUI product component source.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-agents.md

Installable AmroUI product component source.

# AmroUI agents

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-agents.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-agents.json)

## Source

### source/components/agents.tsx

```tsx
import {
  CheckCircle2,
  Clock3,
  FileImage,
  Link2,
  LockKeyhole,
  Paperclip,
  ShieldCheck,
  Sparkles,
  Upload,
  UserRoundCheck,
  Wrench
} from "lucide-react";
import {
  forwardRef,
  useId,
  useState,
  type FormEvent,
  type HTMLAttributes,
  type ReactNode
} from "react";
import { cn } from "../lib/cn.js";
import { Avatar } from "./avatar.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import {
  EmptyNotice,
  FeaturePanel,
  MetricGrid,
  StatusIndicator,
  type AmroProcessStatus,
  type MetricItem
} from "./feature-primitives.js";
import { Input, Select, Textarea } from "./input.js";

export type IssueSeverity = "low" | "medium" | "high" | "critical";

export interface IssueReportValue {
  category: string;
  severity: IssueSeverity;
  summary: string;
  details: string;
  includeDiagnostics: boolean;
}

export interface IssueReportComposerProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<IssueReportValue>;
  categories?: readonly string[];
  screenshotName?: string;
  onAttachScreenshot?: () => void;
  onSubmit?: (value: IssueReportValue) => void;
}

const severityOptions: readonly IssueSeverity[] = ["low", "medium", "high", "critical"];

export const IssueReportComposer = forwardRef<HTMLFormElement, IssueReportComposerProps>(
  (
    {
      categories = ["Unexpected result", "Data issue", "Integration", "Account access"],
      className,
      defaultValue,
      onAttachScreenshot,
      onSubmit,
      screenshotName,
      ...props
    },
    ref
  ) => {
    const detailsId = useId();
    const [category, setCategory] = useState(defaultValue?.category ?? categories[0] ?? "Other");
    const [severity, setSeverity] = useState<IssueSeverity>(defaultValue?.severity ?? "medium");
    const [summary, setSummary] = useState(defaultValue?.summary ?? "");
    const [details, setDetails] = useState(defaultValue?.details ?? "");
    const [includeDiagnostics, setIncludeDiagnostics] = useState(
      defaultValue?.includeDiagnostics ?? true
    );
    const submit = (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      onSubmit?.({ category, severity, summary, details, includeDiagnostics });
    };

return (
      <form ref={ref} className={cn("amro-issue-composer", className)} onSubmit={submit} {...props}>
        <header>
          <div>
            <span className="amro-eyebrow">Report an issue</span>
            <strong>Help the team investigate</strong>
          </div>
          <StatusIndicator label="Draft" status="pending" />
        </header>
        <div className="amro-form-grid">
          <label>
            <span>Category</span>
            <Select value={category} onChange={(event) => setCategory(event.currentTarget.value)}>
              {categories.map((option) => (
                <option key={option}>{option}</option>
              ))}
            </Select>
          </label>
          <fieldset>
            <legend>Severity</legend>
            <div className="amro-segmented-field">
              {severityOptions.map((option) => (
                <button
                  aria-pressed={severity === option}
                  key={option}
                  onClick={() => setSeverity(option)}
                  type="button"
                >
                  {option}
                </button>
              ))}
            </div>
          </fieldset>
        </div>
        <Input
          label="Short summary"
          onChange={(event) => setSummary(event.currentTarget.value)}
          placeholder="What went wrong?"
          required
          value={summary}
        />
        <label htmlFor={detailsId}>
          <span>What happened?</span>
          <Textarea
            id={detailsId}
            onChange={(event) => setDetails(event.currentTarget.value)}
            placeholder="Include the expected outcome and the steps that led here."
            required
            rows={5}
            value={details}
          />
        </label>
        <div className="amro-attachment-row">
          <button onClick={onAttachScreenshot} type="button">
            {screenshotName ? <FileImage aria-hidden="true" /> : <Upload aria-hidden="true" />}
            <span>
              <strong>{screenshotName ?? "Attach screenshot"}</strong>
              <small>{screenshotName ? "Screenshot ready" : "PNG, JPG, or WebP"}</small>
            </span>
          </button>
          <label className="amro-check-row">
            <input
              checked={includeDiagnostics}
              onChange={(event) => setIncludeDiagnostics(event.currentTarget.checked)}
              type="checkbox"
            />
            <span>
              <strong>Include diagnostics</strong>
              <small>Browser, page, and recent request identifiers</small>
            </span>
          </label>
        </div>
        <footer>
          <span>
            <LockKeyhole aria-hidden="true" /> Sensitive values are redacted automatically.
          </span>
          <Button disabled={!summary.trim() || !details.trim()} type="submit">
            Send report
          </Button>
        </footer>
      </form>
    );
  }
);
IssueReportComposer.displayName = "IssueReportComposer";

export interface PoweredByFooterProps extends HTMLAttributes<HTMLElement> {
  productName?: string;
  href?: string;
  showPrivacy?: boolean;
  onPrivacyClick?: () => void;
}

export const PoweredByFooter = forwardRef<HTMLElement, PoweredByFooterProps>(
  (
    {
      className,
      href = "https://amro-ui.vercel.app",
      onPrivacyClick,
      productName = "AmroUI",
      showPrivacy = true,
      ...props
    },
    ref
  ) => (
    <footer ref={ref} className={cn("amro-powered-footer", className)} {...props}>
      <a href={href} rel="noreferrer" target="_blank">
        <Sparkles aria-hidden="true" /> Powered by <strong>{productName}</strong>
      </a>
      {showPrivacy && (
        <button onClick={onPrivacyClick} type="button">
          Privacy
        </button>
      )}
    </footer>
  )
);
PoweredByFooter.displayName = "PoweredByFooter";

export type AgentPresence = "idle" | "working" | "waiting" | "complete" | "error";

export interface AgentStatus {
  id: string;
  name: string;
  role?: string;
  task: string;
  presence: AgentPresence;
  progress?: number;
  avatarUrl?: string;
}

export interface AgentStatusRowProps extends HTMLAttributes<HTMLDivElement> {
  agent?: AgentStatus;
  onOpen?: (agent: AgentStatus) => void;
}

const defaultAgent: AgentStatus = {
  id: "research",
  name: "Research agent",
  role: "Specialist",
  task: "Verifying three source claims",
  presence: "working",
  progress: 68
};

const agentStatusMap: Record<AgentPresence, AmroProcessStatus> = {
  idle: "pending",
  working: "active",
  waiting: "blocked",
  complete: "complete",
  error: "error"
};

export const AgentStatusRow = forwardRef<HTMLDivElement, AgentStatusRowProps>(
  ({ agent = defaultAgent, className, onOpen, ...props }, ref) => {
    const progress = Math.max(0, Math.min(100, agent.progress ?? 0));
    return (
      <div ref={ref} className={cn("amro-agent-row", className)} {...props}>
        <Avatar name={agent.name} {...(agent.avatarUrl ? { src: agent.avatarUrl } : {})} />
        <span className="amro-agent-row__copy">
          <span>
            <strong>{agent.name}</strong>
            {agent.role && <small>{agent.role}</small>}
          </span>
          <span>{agent.task}</span>
          {agent.progress !== undefined && (
            <span
              className="amro-agent-row__progress"
              role="progressbar"
              aria-label={`${agent.name} progress`}
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={progress}
            >
              <i style={{ width: `${progress}%` }} />
            </span>
          )}
        </span>
        <StatusIndicator label={agent.presence} status={agentStatusMap[agent.presence]} />
        {onOpen && (
          <button aria-label={`Open ${agent.name}`} onClick={() => onOpen(agent)} type="button">
            Open
          </button>
        )}
      </div>
    );
  }
);
AgentStatusRow.displayName = "AgentStatusRow";

const defaultAgentTeam: readonly AgentStatus[] = [
  {
    id: "sales",
    name: "Sales agent",
    task: "Scoring account fit",
    presence: "working",
    progress: 74
  },
  { id: "support", name: "Support agent", task: "Standing by", presence: "idle" },
  {
    id: "operations",
    name: "Operations agent",
    task: "Workflow completed",
    presence: "complete",
    progress: 100
  }
];

export interface AgentTeamPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  agents?: readonly AgentStatus[];
  title?: ReactNode;
  onAgentOpen?: (agent: AgentStatus) => void;
}

export const AgentTeamPanel = forwardRef<HTMLDivElement, AgentTeamPanelProps>(
  (
    { agents = defaultAgentTeam, className, onAgentOpen, title = "Specialist team", ...props },
    ref
  ) => {
    const active = agents.filter((agent) => agent.presence === "working").length;
    return (
      <FeaturePanel
        ref={ref}
        className={cn("amro-agent-team", className)}
        eyebrow="Coordination"
        title={title}
        status={<StatusIndicator label={`${active} active`} status={active ? "active" : "idle"} />}
        {...props}
      >
        {agents.length ? (
          <div className="amro-agent-team__list">
            {agents.map((agent) => (
              <AgentStatusRow
                agent={agent}
                key={agent.id}
                {...(onAgentOpen ? { onOpen: onAgentOpen } : {})}
              />
            ))}
          </div>
        ) : (
          <EmptyNotice
            title="No agents assigned"
            description="Add a specialist to begin this workflow."
          />
        )}
      </FeaturePanel>
    );
  }
);
AgentTeamPanel.displayName = "AgentTeamPanel";

const defaultOutcomeMetrics: readonly MetricItem[] = [
  { id: "tasks", label: "Tasks completed", value: "128", detail: "+18 this week" },
  { id: "hours", label: "Hours saved", value: "42.6", detail: "Verified estimate" },
  { id: "runs", label: "Workflow runs", value: "31", detail: "96.8% success" }
];

export interface AgentOutcomeMetricsProps extends HTMLAttributes<HTMLDListElement> {
  metrics?: readonly MetricItem[];
  emptyLabel?: ReactNode;
}

export const AgentOutcomeMetrics = forwardRef<HTMLDListElement, AgentOutcomeMetricsProps>(
  (
    {
      className,
      emptyLabel = "Outcomes appear after the first completed workflow.",
      metrics = defaultOutcomeMetrics,
      ...props
    },
    ref
  ) => (
    <MetricGrid
      ref={ref}
      className={cn("amro-agent-outcomes", className)}
      emptyLabel={emptyLabel}
      items={metrics}
      {...props}
    />
  )
);
AgentOutcomeMetrics.displayName = "AgentOutcomeMetrics";

export interface LiveOutcomeCardProps extends HTMLAttributes<HTMLDivElement> {
  outcome?: ReactNode;
  detail?: ReactNode;
  timestamp?: ReactNode;
  status?: "live" | "verified" | "pending";
  onOpen?: () => void;
}

export const LiveOutcomeCard = forwardRef<HTMLDivElement, LiveOutcomeCardProps>(
  (
    {
      className,
      detail = "Demo booked with Northstar Labs · Tuesday at 14:30",
      onOpen,
      outcome = "Qualified meeting booked",
      status = "verified",
      timestamp = "Just now",
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-live-outcome", className)} {...props}>
      <span className="amro-live-outcome__icon">
        <CheckCircle2 aria-hidden="true" />
      </span>
      <span>
        <span className="amro-eyebrow">Real-world outcome</span>
        <strong>{outcome}</strong>
        <small>{detail}</small>
      </span>
      <span>
        <Badge dot tone={status === "verified" ? "success" : "info"}>
          {status}
        </Badge>
        <time>{timestamp}</time>
      </span>
      {onOpen && (
        <Button onClick={onOpen} size="sm" variant="secondary">
          View receipt
        </Button>
      )}
    </div>
  )
);
LiveOutcomeCard.displayName = "LiveOutcomeCard";

export interface AgentActivityItem {
  id: string;
  agent: string;
  action: ReactNode;
  detail?: ReactNode;
  timestamp: ReactNode;
  type?: "research" | "tool" | "approval" | "outcome";
}

const defaultActivity: readonly AgentActivityItem[] = [
  {
    id: "one",
    agent: "Research agent",
    action: "Verified account evidence",
    detail: "3 sources approved",
    timestamp: "09:42",
    type: "research"
  },
  {
    id: "two",
    agent: "Sales agent",
    action: "Prepared outreach draft",
    detail: "Waiting for human approval",
    timestamp: "09:39",
    type: "approval"
  },
  {
    id: "three",
    agent: "Meeting agent",
    action: "Created calendar hold",
    timestamp: "09:31",
    type: "outcome"
  }
];

export interface RecentAgentActivityProps extends HTMLAttributes<HTMLDivElement> {
  items?: readonly AgentActivityItem[];
  onItemOpen?: (item: AgentActivityItem) => void;
}

const activityIcon = {
  research: Sparkles,
  tool: Wrench,
  approval: UserRoundCheck,
  outcome: CheckCircle2
};

export const RecentAgentActivity = forwardRef<HTMLDivElement, RecentAgentActivityProps>(
  ({ className, items = defaultActivity, onItemOpen, ...props }, ref) => (
    <div ref={ref} className={cn("amro-agent-activity", className)} {...props}>
      <header>
        <span>
          <span className="amro-eyebrow">Live operations</span>
          <strong>Recent agent activity</strong>
        </span>
        <Badge dot tone="success">
          Live
        </Badge>
      </header>
      {items.length ? (
        <ol>
          {items.map((item) => {
            const Icon = activityIcon[item.type ?? "tool"];
            return (
              <li key={item.id}>
                <span className="amro-agent-activity__icon">
                  <Icon aria-hidden="true" />
                </span>
                <span>
                  <strong>{item.action}</strong>
                  <small>
                    {item.agent}
                    {item.detail !== undefined && <> · {item.detail}</>}
                  </small>
                </span>
                <time>{item.timestamp}</time>
                {onItemOpen && (
                  <button
                    aria-label={`Open ${item.agent} activity`}
                    onClick={() => onItemOpen(item)}
                    type="button"
                  >
                    Open
                  </button>
                )}
              </li>
            );
          })}
        </ol>
      ) : (
        <EmptyNotice title="No recent activity" />
      )}
    </div>
  )
);
RecentAgentActivity.displayName = "RecentAgentActivity";

export interface ControlBoundary {
  id: string;
  label: ReactNode;
  description: ReactNode;
  state: "allowed" | "approval" | "blocked";
  icon?: ReactNode;
}

const defaultBoundaries: readonly ControlBoundary[] = [
  {
    id: "knowledge",
    label: "Your knowledge",
    description: "Approved collections only",
    state: "allowed",
    icon: <ShieldCheck aria-hidden="true" />
  },
  {
    id: "tools",
    label: "Your tools",
    description: "CRM and calendar connected",
    state: "allowed",
    icon: <Wrench aria-hidden="true" />
  },
  {
    id: "control",
    label: "Your control",
    description: "Human approval before external sends",
    state: "approval",
    icon: <UserRoundCheck aria-hidden="true" />
  }
];

export interface ControlBoundaryCardProps extends HTMLAttributes<HTMLDivElement> {
  boundaries?: readonly ControlBoundary[];
  onManage?: () => void;
}

export const ControlBoundaryCard = forwardRef<HTMLDivElement, ControlBoundaryCardProps>(
  ({ boundaries = defaultBoundaries, className, onManage, ...props }, ref) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-control-boundary", className)}
      eyebrow="Trust contract"
      title="Agent control boundaries"
      actions={
        onManage ? (
          <Button onClick={onManage} size="sm" variant="tertiary">
            Manage
          </Button>
        ) : undefined
      }
      {...props}
    >
      <div className="amro-control-boundary__grid">
        {boundaries.map((boundary) => (
          <article data-state={boundary.state} key={boundary.id}>
            <span>{boundary.icon ?? <LockKeyhole aria-hidden="true" />}</span>
            <strong>{boundary.label}</strong>
            <small>{boundary.description}</small>
            <StatusIndicator
              label={boundary.state === "approval" ? "Approval required" : boundary.state}
              status={
                boundary.state === "allowed"
                  ? "complete"
                  : boundary.state === "approval"
                    ? "blocked"
                    : "error"
              }
            />
          </article>
        ))}
      </div>
    </FeaturePanel>
  )
);
ControlBoundaryCard.displayName = "ControlBoundaryCard";

export interface KnowledgeCollection {
  id: string;
  name: ReactNode;
  documentCount: number;
  updatedAt: ReactNode;
  approved: boolean;
  freshness?: "fresh" | "aging" | "stale";
}

const defaultKnowledge: readonly KnowledgeCollection[] = [
  {
    id: "product",
    name: "Product knowledge",
    documentCount: 42,
    updatedAt: "12 minutes ago",
    approved: true,
    freshness: "fresh"
  },
  {
    id: "support",
    name: "Support playbooks",
    documentCount: 18,
    updatedAt: "Yesterday",
    approved: true,
    freshness: "fresh"
  },
  {
    id: "policy",
    name: "Policy archive",
    documentCount: 9,
    updatedAt: "32 days ago",
    approved: false,
    freshness: "stale"
  }
];

export interface TrustedKnowledgeCardProps extends HTMLAttributes<HTMLDivElement> {
  collections?: readonly KnowledgeCollection[];
  onCollectionOpen?: (collection: KnowledgeCollection) => void;
  onAddSource?: () => void;
}

export const TrustedKnowledgeCard = forwardRef<HTMLDivElement, TrustedKnowledgeCardProps>(
  ({ className, collections = defaultKnowledge, onAddSource, onCollectionOpen, ...props }, ref) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-trusted-knowledge", className)}
      eyebrow="Grounding"
      title="Trusted knowledge"
      status={
        <StatusIndicator
          label={`${collections.filter((item) => item.approved).length} approved`}
          status="complete"
        />
      }
      {...props}
    >
      {collections.length ? (
        <div className="amro-trusted-knowledge__list">
          {collections.map((collection) => (
            <button
              disabled={!onCollectionOpen}
              key={collection.id}
              onClick={() => onCollectionOpen?.(collection)}
              type="button"
            >
              <span className="amro-trusted-knowledge__icon">
                <Link2 aria-hidden="true" />
              </span>
              <span>
                <strong>{collection.name}</strong>
                <small>
                  {collection.documentCount} documents · Updated {collection.updatedAt}
                </small>
              </span>
              <Badge dot tone={collection.approved ? "success" : "neutral"}>
                {collection.approved ? "Approved" : "Review"}
              </Badge>
              <StatusIndicator
                label={collection.freshness ?? "fresh"}
                status={collection.freshness === "stale" ? "warning" : "online"}
              />
            </button>
          ))}
        </div>
      ) : (
        <EmptyNotice
          title="No knowledge connected"
          description="Connect an approved source to ground assistant answers."
        />
      )}
      {onAddSource && (
        <Button onClick={onAddSource} variant="secondary">
          <Paperclip aria-hidden="true" /> Add source
        </Button>
      )}
    </FeaturePanel>
  )
);
TrustedKnowledgeCard.displayName = "TrustedKnowledgeCard";

export interface HumanInLoopIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  stage?: ReactNode;
  reviewer?: ReactNode;
  compact?: boolean;
  onReview?: () => void;
}

export const HumanInLoopIndicator = forwardRef<HTMLDivElement, HumanInLoopIndicatorProps>(
  (
    {
      className,
      compact = false,
      description = "The agent has paused before an externally consequential action.",
      onReview,
      reviewer = "Workspace approver",
      stage = "Send outreach",
      title = "Human approval required",
      ...props
    },
    ref
  ) => (
    <div
      ref={ref}
      className={cn("amro-human-loop", compact && "amro-human-loop--compact", className)}
      role="status"
      {...props}
    >
      <span className="amro-human-loop__icon">
        <UserRoundCheck aria-hidden="true" />
      </span>
      <span>
        <span className="amro-eyebrow">Control boundary · {stage}</span>
        <strong>{title}</strong>
        {!compact && <small>{description}</small>}
      </span>
      <span>
        <Badge tone="info">{reviewer}</Badge>
        <span>
          <Clock3 aria-hidden="true" /> Waiting
        </span>
      </span>
      {onReview && (
        <Button onClick={onReview} size="sm">
          Review
        </Button>
      )}
    </div>
  )
);
HumanInLoopIndicator.displayName = "HumanInLoopIndicator";
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-conversational.md

Installable AmroUI product component source.

# AmroUI conversational

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-conversational.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-conversational.json)

## Source

### source/components/conversational.tsx

```tsx
import {
  Bot,
  Check,
  CircleAlert,
  Copy,
  Mic,
  MoreHorizontal,
  Paperclip,
  PhoneForwarded,
  Send,
  Square,
  X
} from "lucide-react";
import {
  forwardRef,
  useId,
  useMemo,
  useState,
  type ButtonHTMLAttributes,
  type HTMLAttributes,
  type ReactNode,
  type TextareaHTMLAttributes
} from "react";
import { cn } from "../lib/cn.js";
import { Avatar } from "./avatar.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import {
  ActionRow,
  EmptyNotice,
  FeaturePanel,
  StatusIndicator,
  type ActionItem
} from "./feature-primitives.js";
import { Textarea } from "./input.js";

export type AssistantPresenceStatus = "idle" | "listening" | "thinking" | "speaking" | "error";

export interface AssistantPresenceOrbProps extends HTMLAttributes<HTMLDivElement> {
  status: AssistantPresenceStatus;
  label?: ReactNode;
  size?: "sm" | "md" | "lg";
  children?: ReactNode;
}

export const AssistantPresenceOrb = forwardRef<HTMLDivElement, AssistantPresenceOrbProps>(
  ({ children, className, label, size = "md", status, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "amro-presence-orb",
        `amro-presence-orb--${status}`,
        `amro-presence-orb--${size}`,
        className
      )}
      data-status={status}
      role="status"
      {...props}
    >
      <span className="amro-presence-orb__ring" aria-hidden="true" />
      <span className="amro-presence-orb__core">{children ?? <Bot aria-hidden="true" />}</span>
      <span className="amro-visually-hidden">{label ?? `Assistant is ${status}`}</span>
    </div>
  )
);
AssistantPresenceOrb.displayName = "AssistantPresenceOrb";

export type AskAmroLauncherState = "online" | "unread" | "minimized" | "attention";

export interface AskAmroLauncherProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  state?: AskAmroLauncherState;
  assistantName?: string;
  unreadCount?: number;
  expanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
}

export const AskAmroLauncher = forwardRef<HTMLButtonElement, AskAmroLauncherProps>(
  (
    {
      assistantName = "Ask Amro",
      className,
      expanded,
      onExpandedChange,
      state = "online",
      unreadCount = 0,
      ...props
    },
    ref
  ) => {
    const [internalExpanded, setInternalExpanded] = useState(false);
    const isExpanded = expanded ?? internalExpanded;
    const toggle = () => {
      const next = !isExpanded;
      setInternalExpanded(next);
      onExpandedChange?.(next);
    };

return (
      <button
        ref={ref}
        aria-expanded={isExpanded}
        className={cn("amro-launcher", `amro-launcher--${state}`, className)}
        onClick={toggle}
        type="button"
        {...props}
      >
        <AssistantPresenceOrb size="sm" status={state === "attention" ? "speaking" : "idle"} />
        {state !== "minimized" && <span className="amro-launcher__label">{assistantName}</span>}
        {(state === "unread" || unreadCount > 0) && (
          <span
            className="amro-launcher__unread"
            aria-label={`${unreadCount || 1} unread messages`}
          >
            {unreadCount || 1}
          </span>
        )}
      </button>
    );
  }
);
AskAmroLauncher.displayName = "AskAmroLauncher";

export interface AssistantHeaderProps extends HTMLAttributes<HTMLElement> {
  name: string;
  subtitle?: ReactNode;
  avatarUrl?: string;
  availability?: "online" | "offline" | "warning";
  onClose?: () => void;
  onOptions?: () => void;
}

export const AssistantHeader = forwardRef<HTMLElement, AssistantHeaderProps>(
  (
    { availability = "online", avatarUrl, className, name, onClose, onOptions, subtitle, ...props },
    ref
  ) => (
    <header ref={ref} className={cn("amro-assistant-header", className)} {...props}>
      <Avatar name={name} {...(avatarUrl === undefined ? {} : { src: avatarUrl })} />
      <div className="amro-assistant-header__identity">
        <strong>{name}</strong>
        <span>{subtitle ?? availability}</span>
      </div>
      <StatusIndicator status={availability} label={availability} />
      {onOptions !== undefined && (
        <button
          aria-label="Assistant options"
          className="amro-icon-button"
          onClick={onOptions}
          type="button"
        >
          <MoreHorizontal aria-hidden="true" />
        </button>
      )}
      {onClose !== undefined && (
        <button
          aria-label="Close assistant"
          className="amro-icon-button"
          onClick={onClose}
          type="button"
        >
          <X aria-hidden="true" />
        </button>
      )}
    </header>
  )
);
AssistantHeader.displayName = "AssistantHeader";

export interface ConversationMode {
  id: string;
  label: ReactNode;
  icon?: ReactNode;
  disabled?: boolean;
}

export interface ConversationModeBarProps extends HTMLAttributes<HTMLDivElement> {
  modes: readonly ConversationMode[];
  value: string;
  onValueChange: (value: string) => void;
  ariaLabel?: string;
}

export const ConversationModeBar = forwardRef<HTMLDivElement, ConversationModeBarProps>(
  ({ ariaLabel = "Conversation mode", className, modes, onValueChange, value, ...props }, ref) => (
    <div
      ref={ref}
      aria-label={ariaLabel}
      className={cn("amro-mode-bar", className)}
      role="tablist"
      {...props}
    >
      {modes.map((mode) => (
        <button
          aria-selected={value === mode.id}
          className="amro-mode-bar__option"
          disabled={mode.disabled}
          key={mode.id}
          onClick={() => onValueChange(mode.id)}
          role="tab"
          tabIndex={value === mode.id ? 0 : -1}
          type="button"
        >
          {mode.icon}
          <span>{mode.label}</span>
        </button>
      ))}
    </div>
  )
);
ConversationModeBar.displayName = "ConversationModeBar";

export interface OmniPromptComposerProps extends Omit<
  TextareaHTMLAttributes<HTMLTextAreaElement>,
  "onSubmit"
> {
  onSubmit: (value: string) => void;
  onAttach?: () => void;
  onVoice?: () => void;
  onCommand?: () => void;
  sendLabel?: string;
  value?: string;
  defaultValue?: string;
}

export const OmniPromptComposer = forwardRef<HTMLTextAreaElement, OmniPromptComposerProps>(
  (
    {
      className,
      defaultValue = "",
      disabled,
      onAttach,
      onCommand,
      onSubmit,
      onVoice,
      placeholder = "Ask anything…",
      sendLabel = "Send message",
      value,
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = useState(String(defaultValue));
    const currentValue = value ?? internalValue;
    const submit = () => {
      const trimmed = currentValue.trim();
      if (trimmed.length === 0 || disabled) return;
      onSubmit(trimmed);
      if (value === undefined) setInternalValue("");
    };

return (
      <div className={cn("amro-composer", className)}>
        <Textarea
          ref={ref}
          className="amro-composer__input"
          disabled={disabled}
          onChange={(event) => setInternalValue(event.currentTarget.value)}
          onKeyDown={(event) => {
            if (event.key === "Enter" && !event.shiftKey) {
              event.preventDefault();
              submit();
            }
          }}
          placeholder={placeholder}
          rows={2}
          value={currentValue}
          {...props}
        />
        <div className="amro-composer__toolbar">
          <div className="amro-composer__tools">
            {onAttach !== undefined && (
              <button
                aria-label="Attach file"
                className="amro-icon-button"
                onClick={onAttach}
                type="button"
              >
                <Paperclip aria-hidden="true" />
              </button>
            )}
            {onVoice !== undefined && (
              <button
                aria-label="Start voice input"
                className="amro-icon-button"
                onClick={onVoice}
                type="button"
              >
                <Mic aria-hidden="true" />
              </button>
            )}
            {onCommand !== undefined && (
              <button className="amro-command-trigger" onClick={onCommand} type="button">
                /
              </button>
            )}
          </div>
          <Button
            aria-label={sendLabel}
            disabled={disabled || currentValue.trim().length === 0}
            onClick={submit}
            size="sm"
          >
            <Send aria-hidden="true" size={16} />
            <span className="amro-visually-hidden">{sendLabel}</span>
          </Button>
        </div>
      </div>
    );
  }
);
OmniPromptComposer.displayName = "OmniPromptComposer";

interface MessageBubbleBaseProps extends HTMLAttributes<HTMLDivElement> {
  author?: ReactNode;
  timestamp?: ReactNode;
  deliveryState?: ReactNode;
  actions?: ReactNode;
}

export interface AssistantMessageBubbleProps extends MessageBubbleBaseProps {
  assistantName?: string;
  avatarUrl?: string;
  streaming?: boolean;
}

export const AssistantMessageBubble = forwardRef<HTMLDivElement, AssistantMessageBubbleProps>(
  (
    {
      actions,
      assistantName = "Assistant",
      avatarUrl,
      children,
      className,
      streaming = false,
      timestamp,
      ...props
    },
    ref
  ) => (
    <article
      ref={ref}
      className={cn("amro-message", "amro-message--assistant", className)}
      {...props}
    >
      <Avatar name={assistantName} {...(avatarUrl === undefined ? {} : { src: avatarUrl })} />
      <div className="amro-message__content">
        <div className="amro-message__meta">
          <strong>{assistantName}</strong>
          {timestamp !== undefined && <time>{timestamp}</time>}
          {streaming && <StatusIndicator status="loading" label="Streaming" />}
        </div>
        <div className="amro-message__bubble">{children}</div>
        {actions !== undefined && <div className="amro-message__actions">{actions}</div>}
      </div>
    </article>
  )
);
AssistantMessageBubble.displayName = "AssistantMessageBubble";

export interface HumanMessageBubbleProps extends MessageBubbleBaseProps {
  name?: string;
}

export const HumanMessageBubble = forwardRef<HTMLDivElement, HumanMessageBubbleProps>(
  ({ children, className, deliveryState, name = "You", timestamp, ...props }, ref) => (
    <article ref={ref} className={cn("amro-message", "amro-message--human", className)} {...props}>
      <div className="amro-message__content">
        <div className="amro-message__meta">
          <strong>{name}</strong>
          {timestamp !== undefined && <time>{timestamp}</time>}
        </div>
        <div className="amro-message__bubble">{children}</div>
        {deliveryState !== undefined && (
          <small className="amro-message__delivery">{deliveryState}</small>
        )}
      </div>
    </article>
  )
);
HumanMessageBubble.displayName = "HumanMessageBubble";

export interface StreamingAnswerProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
  content: ReactNode;
  status?: "streaming" | "complete" | "cancelled" | "error";
  elapsedSeconds?: number;
  onCancel?: () => void;
  onCopy?: () => void;
}

export const StreamingAnswer = forwardRef<HTMLDivElement, StreamingAnswerProps>(
  (
    { className, content, elapsedSeconds, onCancel, onCopy, status = "streaming", ...props },
    ref
  ) => (
    <div ref={ref} aria-live="polite" className={cn("amro-streaming-answer", className)} {...props}>
      <div className="amro-streaming-answer__content">{content}</div>
      <div className="amro-streaming-answer__footer">
        <StatusIndicator
          status={
            status === "complete"
              ? "success"
              : status === "error"
                ? "error"
                : status === "streaming"
                  ? "loading"
                  : "idle"
          }
          label={status}
        />
        {elapsedSeconds !== undefined && <span>{elapsedSeconds}s</span>}
        {status === "streaming" && onCancel !== undefined && (
          <button
            className="amro-icon-button"
            aria-label="Cancel generation"
            onClick={onCancel}
            type="button"
          >
            <Square aria-hidden="true" />
          </button>
        )}
        {onCopy !== undefined && (
          <button
            className="amro-icon-button"
            aria-label="Copy answer"
            onClick={onCopy}
            type="button"
          >
            <Copy aria-hidden="true" />
          </button>
        )}
      </div>
    </div>
  )
);
StreamingAnswer.displayName = "StreamingAnswer";

export interface SuggestedPrompt {
  id: string;
  label: ReactNode;
  prompt: string;
  description?: ReactNode;
}

export interface SuggestedPromptDeckProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  prompts: readonly SuggestedPrompt[];
  onSelect: (prompt: SuggestedPrompt) => void;
  emptyLabel?: ReactNode;
}

export const SuggestedPromptDeck = forwardRef<HTMLDivElement, SuggestedPromptDeckProps>(
  ({ className, emptyLabel = "No suggestions available", onSelect, prompts, ...props }, ref) => (
    <div ref={ref} className={cn("amro-prompt-deck", className)} {...props}>
      {prompts.length === 0 ? (
        <EmptyNotice title={emptyLabel} />
      ) : (
        prompts.map((prompt) => (
          <button
            className="amro-prompt-card"
            key={prompt.id}
            onClick={() => onSelect(prompt)}
            type="button"
          >
            <strong>{prompt.label}</strong>
            {prompt.description !== undefined && <span>{prompt.description}</span>}
          </button>
        ))
      )}
    </div>
  )
);
SuggestedPromptDeck.displayName = "SuggestedPromptDeck";

export interface SourceCitation {
  id: string;
  title: ReactNode;
  href?: string;
  excerpt?: ReactNode;
  confidence?: number;
  approved?: boolean;
}

export interface SourceCitationTrayProps extends HTMLAttributes<HTMLDetailsElement> {
  sources: readonly SourceCitation[];
  label?: ReactNode;
}

export const SourceCitationTray = forwardRef<HTMLDetailsElement, SourceCitationTrayProps>(
  ({ className, label, sources, ...props }, ref) => (
    <details ref={ref} className={cn("amro-citation-tray", className)} {...props}>
      <summary>{label ?? `${sources.length} source${sources.length === 1 ? "" : "s"}`}</summary>
      <div className="amro-citation-tray__list">
        {sources.length === 0 ? (
          <EmptyNotice title="No sources available" />
        ) : (
          sources.map((source) => (
            <article className="amro-citation" key={source.id}>
              <div>
                {source.href === undefined ? (
                  <strong>{source.title}</strong>
                ) : (
                  <a href={source.href}>{source.title}</a>
                )}
                {source.excerpt !== undefined && <p>{source.excerpt}</p>}
              </div>
              <div className="amro-citation__meta">
                {source.approved && <Badge tone="success">Approved</Badge>}
                {source.confidence !== undefined && (
                  <span>{Math.round(source.confidence * 100)}%</span>
                )}
              </div>
            </article>
          ))
        )}
      </div>
    </details>
  )
);
SourceCitationTray.displayName = "SourceCitationTray";

export type KnowledgeBoundary = "company" | "web" | "integration" | "mixed";

export interface KnowledgeBoundaryBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  boundary: KnowledgeBoundary;
  label?: ReactNode;
}

export const KnowledgeBoundaryBadge = forwardRef<HTMLSpanElement, KnowledgeBoundaryBadgeProps>(
  ({ boundary, className, label, ...props }, ref) => (
    <Badge
      ref={ref}
      className={cn("amro-knowledge-boundary", className)}
      tone={boundary === "company" ? "success" : "neutral"}
      {...props}
    >
      {label ?? (boundary === "company" ? "Company knowledge" : boundary)}
    </Badge>
  )
);
KnowledgeBoundaryBadge.displayName = "KnowledgeBoundaryBadge";

export interface TypingAgent {
  id: string;
  name: string;
  avatarUrl?: string;
}

export interface AgentTypingStackProps extends HTMLAttributes<HTMLDivElement> {
  agents: readonly TypingAgent[];
  label?: ReactNode;
}

export const AgentTypingStack = forwardRef<HTMLDivElement, AgentTypingStackProps>(
  ({ agents, className, label, ...props }, ref) => (
    <div ref={ref} className={cn("amro-typing-stack", className)} role="status" {...props}>
      <div className="amro-typing-stack__avatars" aria-hidden="true">
        {agents.slice(0, 4).map((agent) => (
          <Avatar
            key={agent.id}
            name={agent.name}
            {...(agent.avatarUrl === undefined ? {} : { src: agent.avatarUrl })}
          />
        ))}
      </div>
      <span>
        {label ??
          (agents.length === 0
            ? "Waiting for an agent"
            : `${agents.map((agent) => agent.name).join(", ")} working`)}
      </span>
      {agents.length > 0 && (
        <span className="amro-typing-dots" aria-hidden="true">
          •••
        </span>
      )}
    </div>
  )
);
AgentTypingStack.displayName = "AgentTypingStack";

export interface ConversationHandoffCardProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "title"
> {
  title?: ReactNode;
  description?: ReactNode;
  channels: readonly ActionItem[];
  status?: "available" | "queued" | "unavailable" | "error";
}

export const ConversationHandoffCard = forwardRef<HTMLDivElement, ConversationHandoffCardProps>(
  (
    {
      channels,
      className,
      description,
      status = "available",
      title = "Continue with a person",
      ...props
    },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-handoff-card", className)}
      description={description}
      status={
        <StatusIndicator
          status={
            status === "available"
              ? "online"
              : status === "error"
                ? "error"
                : status === "unavailable"
                  ? "offline"
                  : "loading"
          }
          label={status}
        />
      }
      title={title}
      {...props}
    >
      <ActionRow actions={channels} />
    </FeaturePanel>
  )
);
ConversationHandoffCard.displayName = "ConversationHandoffCard";

export interface EscalationReasonCardProps extends HTMLAttributes<HTMLDivElement> {
  reason: ReactNode;
  severity?: "info" | "warning" | "urgent";
  recommendedAction?: ReactNode;
  onEscalate?: () => void;
}

export const EscalationReasonCard = forwardRef<HTMLDivElement, EscalationReasonCardProps>(
  ({ className, onEscalate, reason, recommendedAction, severity = "warning", ...props }, ref) => (
    <div
      ref={ref}
      className={cn("amro-escalation-card", `amro-escalation-card--${severity}`, className)}
      {...props}
    >
      <CircleAlert aria-hidden="true" />
      <div>
        <strong>Human review recommended</strong>
        <p>{reason}</p>
        {recommendedAction !== undefined && <small>{recommendedAction}</small>}
      </div>
      {onEscalate !== undefined && (
        <Button onClick={onEscalate} size="sm" variant="secondary">
          Escalate
        </Button>
      )}
    </div>
  )
);
EscalationReasonCard.displayName = "EscalationReasonCard";

export interface ChatActionReceiptProps extends HTMLAttributes<HTMLDivElement> {
  action: ReactNode;
  detail?: ReactNode;
  status?: "pending" | "complete" | "failed";
  timestamp?: ReactNode;
}

export const ChatActionReceipt = forwardRef<HTMLDivElement, ChatActionReceiptProps>(
  ({ action, className, detail, status = "complete", timestamp, ...props }, ref) => (
    <div ref={ref} className={cn("amro-action-receipt", className)} role="status" {...props}>
      {status === "complete" ? (
        <Check aria-hidden="true" />
      ) : status === "failed" ? (
        <CircleAlert aria-hidden="true" />
      ) : (
        <span className="amro-spinner" aria-hidden="true" />
      )}
      <div>
        <strong>{action}</strong>
        {detail !== undefined && <span>{detail}</span>}
      </div>
      {timestamp !== undefined && <time>{timestamp}</time>}
    </div>
  )
);
ChatActionReceipt.displayName = "ChatActionReceipt";

export interface InlineApprovalCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title: ReactNode;
  description?: ReactNode;
  status?: "pending" | "approved" | "rejected" | "error";
  onApprove?: () => void;
  onEdit?: () => void;
  onReject?: () => void;
  children?: ReactNode;
}

export const InlineApprovalCard = forwardRef<HTMLDivElement, InlineApprovalCardProps>(
  (
    {
      children,
      className,
      description,
      onApprove,
      onEdit,
      onReject,
      status = "pending",
      title,
      ...props
    },
    ref
  ) => {
    const actions = useMemo<ActionItem[]>(
      () => [
        ...(onApprove === undefined
          ? []
          : [{ id: "approve", label: "Approve", onSelect: onApprove, tone: "primary" as const }]),
        ...(onEdit === undefined ? [] : [{ id: "edit", label: "Edit", onSelect: onEdit }]),
        ...(onReject === undefined
          ? []
          : [{ id: "reject", label: "Reject", onSelect: onReject, tone: "danger" as const }])
      ],
      [onApprove, onEdit, onReject]
    );

return (
      <FeaturePanel
        ref={ref}
        className={cn("amro-inline-approval", className)}
        description={description}
        footer={status === "pending" ? <ActionRow actions={actions} /> : undefined}
        status={
          <StatusIndicator
            status={
              status === "approved"
                ? "success"
                : status === "rejected"
                  ? "blocked"
                  : status === "error"
                    ? "error"
                    : "pending"
            }
            label={status}
          />
        }
        title={title}
        {...props}
      >
        {children}
      </FeaturePanel>
    );
  }
);
InlineApprovalCard.displayName = "InlineApprovalCard";

export interface VoiceConversationDockProps extends HTMLAttributes<HTMLDivElement> {
  status: AssistantPresenceStatus;
  muted?: boolean;
  transcriptVisible?: boolean;
  elapsedLabel?: ReactNode;
  levels?: readonly number[];
  onMuteChange?: (muted: boolean) => void;
  onInterrupt?: () => void;
  onTranscriptToggle?: () => void;
  onEnd?: () => void;
}

export const VoiceConversationDock = forwardRef<HTMLDivElement, VoiceConversationDockProps>(
  (
    {
      className,
      elapsedLabel,
      levels = [0.3, 0.7, 0.45, 0.9, 0.55, 0.35, 0.76],
      muted = false,
      onEnd,
      onInterrupt,
      onMuteChange,
      onTranscriptToggle,
      status,
      transcriptVisible = false,
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-voice-dock", className)} {...props}>
      <AssistantPresenceOrb status={status} />
      <div className="amro-waveform" aria-label="Voice activity" role="img">
        {levels.map((level, index) => (
          <span
            key={`${index}-${level}`}
            style={{ "--amro-wave-level": level } as React.CSSProperties}
          />
        ))}
      </div>
      {elapsedLabel !== undefined && (
        <span className="amro-voice-dock__elapsed">{elapsedLabel}</span>
      )}
      <button
        aria-label={muted ? "Unmute" : "Mute"}
        aria-pressed={muted}
        className="amro-icon-button"
        onClick={() => onMuteChange?.(!muted)}
        type="button"
      >
        <Mic aria-hidden="true" />
      </button>
      {onInterrupt !== undefined && (
        <Button onClick={onInterrupt} size="sm" variant="secondary">
          Interrupt
        </Button>
      )}
      {onTranscriptToggle !== undefined && (
        <button
          aria-pressed={transcriptVisible}
          className="amro-inline-action"
          onClick={onTranscriptToggle}
          type="button"
        >
          Transcript
        </button>
      )}
      {onEnd !== undefined && (
        <button
          aria-label="End voice session"
          className="amro-icon-button amro-icon-button--danger"
          onClick={onEnd}
          type="button"
        >
          <PhoneForwarded aria-hidden="true" />
        </button>
      )}
    </div>
  )
);
VoiceConversationDock.displayName = "VoiceConversationDock";

export type ConversationTimelineItemType = "message" | "action" | "tool" | "handoff" | "error";

export interface ConversationTimelineItem {
  id: string;
  type: ConversationTimelineItemType;
  title: ReactNode;
  content?: ReactNode;
  timestamp?: ReactNode;
  status?: ReactNode;
}

export interface ConversationTimelineProps extends HTMLAttributes<HTMLOListElement> {
  items: readonly ConversationTimelineItem[];
  emptyLabel?: ReactNode;
}

export const ConversationTimeline = forwardRef<HTMLOListElement, ConversationTimelineProps>(
  ({ className, emptyLabel = "No conversation activity", items, ...props }, ref) => (
    <ol ref={ref} className={cn("amro-timeline", className)} {...props}>
      {items.length === 0 ? (
        <li>
          <EmptyNotice title={emptyLabel} />
        </li>
      ) : (
        items.map((item) => (
          <li
            className={cn("amro-timeline__item", `amro-timeline__item--${item.type}`)}
            key={item.id}
          >
            <span className="amro-timeline__marker" aria-hidden="true" />
            <div>
              <header>
                <strong>{item.title}</strong>
                {item.timestamp !== undefined && <time>{item.timestamp}</time>}
              </header>
              {item.content !== undefined && <div>{item.content}</div>}
              {item.status !== undefined && <small>{item.status}</small>}
            </div>
          </li>
        ))
      )}
    </ol>
  )
);
ConversationTimeline.displayName = "ConversationTimeline";

export interface ChatOption {
  id: string;
  label: ReactNode;
  description?: ReactNode;
  onSelect?: () => void;
  disabled?: boolean;
}

export interface ChatOptionsPopoverProps extends HTMLAttributes<HTMLDetailsElement> {
  options: readonly ChatOption[];
  triggerLabel?: string;
}

export const ChatOptionsPopover = forwardRef<HTMLDetailsElement, ChatOptionsPopoverProps>(
  ({ className, options, triggerLabel = "Chat options", ...props }, ref) => {
    const menuId = useId();
    return (
      <details ref={ref} className={cn("amro-options-popover", className)} {...props}>
        <summary aria-controls={menuId} aria-label={triggerLabel}>
          <MoreHorizontal aria-hidden="true" />
        </summary>
        <div className="amro-options-popover__menu" id={menuId} role="menu">
          {options.map((option) => (
            <button
              disabled={option.disabled}
              key={option.id}
              onClick={option.onSelect}
              role="menuitem"
              type="button"
            >
              <strong>{option.label}</strong>
              {option.description !== undefined && <span>{option.description}</span>}
            </button>
          ))}
        </div>
      </details>
    );
  }
);
ChatOptionsPopover.displayName = "ChatOptionsPopover";
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-editorial.md

Installable AmroUI product component source.

# AmroUI editorial

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-editorial.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-editorial.json)

## Source

### source/components/editorial.tsx

```tsx
import {
  AlertTriangle,
  Accessibility,
  ArrowDown,
  ArrowUp,
  BookOpenCheck,
  Check,
  CheckCircle2,
  ChevronRight,
  CircleAlert,
  Clock3,
  Code2,
  Download,
  Eye,
  FileText,
  Globe2,
  GripVertical,
  Image as ImageIcon,
  Link2,
  LockKeyhole,
  MapPin,
  MessageSquare,
  Plus,
  Quote,
  RefreshCw,
  Search,
  Sparkles,
  Target,
  Upload,
  UserRound,
  Webhook,
  X
} from "lucide-react";
import { useState, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import { Card } from "./card.js";
import { EmptyNotice, FeaturePanel, StatusIndicator } from "./feature-primitives.js";
import { Input, Textarea } from "./input.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export type EditorialStageStatus = "pending" | "active" | "complete" | "blocked" | "error";
export interface PipelineStageCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  status?: EditorialStageStatus;
  owner?: ReactNode;
  elapsed?: ReactNode;
  warnings?: readonly ReactNode[];
  nextAction?: ReactNode;
  onContinue?: () => void;
}

export function PipelineStageCard({
  className,
  description = "Analyse ranking pages, recurring themes, and evidence gaps.",
  elapsed = "02:18",
  nextAction = "Review research",
  onContinue,
  owner = "Research agent",
  status = "active",
  title = "SERP research",
  warnings = [],
  ...props
}: PipelineStageCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-pipeline-stage-card", className)}
      eyebrow="Editorial stage"
      title={title}
      description={description}
      status={<StatusIndicator label={status} status={status} />}
      {...props}
    >
      <div className="amro-pipeline-stage-card__meta">
        <span>
          <UserRound aria-hidden="true" />
          <small>Owner</small>
          <strong>{owner}</strong>
        </span>
        <span>
          <Clock3 aria-hidden="true" />
          <small>Elapsed</small>
          <strong>{elapsed}</strong>
        </span>
      </div>
      {warnings.length > 0 && (
        <ul>
          {warnings.map((warning, index) => (
            <li key={index}>
              <AlertTriangle aria-hidden="true" />
              {warning}
            </li>
          ))}
        </ul>
      )}
      <footer>
        <span>
          <small>Next action</small>
          <strong>{nextAction}</strong>
        </span>
        {onContinue && (
          <Button onClick={onContinue}>
            Continue
            <ChevronRight aria-hidden="true" />
          </Button>
        )}
      </footer>
    </FeaturePanel>
  );
}

export type SearchIntent = "informational" | "commercial" | "transactional" | "mixed";
export interface KeywordBrief {
  keyword: string;
  domain: string;
  audience: string;
  location: string;
  intent: SearchIntent;
}
export interface KeywordBriefFormProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<KeywordBrief>;
  onSubmit?: (brief: KeywordBrief) => void;
}

export function KeywordBriefForm({
  className,
  defaultValue,
  onSubmit,
  ...props
}: KeywordBriefFormProps) {
  const [brief, setBrief] = useState<KeywordBrief>({
    keyword: defaultValue?.keyword ?? "AI customer support automation",
    domain: defaultValue?.domain ?? "amroagents.com",
    audience: defaultValue?.audience ?? "Customer experience leaders",
    location: defaultValue?.location ?? "United Kingdom",
    intent: defaultValue?.intent ?? "commercial"
  });
  const update = <K extends keyof KeywordBrief>(key: K, value: KeywordBrief[K]) =>
    setBrief((current) => ({ ...current, [key]: value }));
  const ready =
    brief.keyword.trim().length > 1 &&
    brief.domain.trim().length > 1 &&
    brief.audience.trim().length > 1;
  return (
    <form
      className={cn("amro-keyword-brief", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (ready) onSubmit?.(brief);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Content brief"
        title="Define the search opportunity"
        description="Give the research agent enough context to avoid generic output."
      >
        <div className="amro-keyword-brief__grid">
          <Input
            label="Primary keyword"
            value={brief.keyword}
            onChange={(event) => update("keyword", event.target.value)}
          />
          <Input
            label="Publishing domain"
            value={brief.domain}
            onChange={(event) => update("domain", event.target.value)}
          />
          <Input
            label="Audience"
            value={brief.audience}
            onChange={(event) => update("audience", event.target.value)}
          />
          <Input
            label="Search location"
            value={brief.location}
            onChange={(event) => update("location", event.target.value)}
          />
          <SearchIntentSelector
            value={brief.intent}
            onChange={(intent) => update("intent", intent)}
          />
        </div>
        <footer>
          <span>
            <Globe2 aria-hidden="true" /> Research respects the selected market and domain.
          </span>
          <Button disabled={!ready} type="submit">
            Start research
            <Search aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface SERPPage {
  id: string;
  title: ReactNode;
  url: string;
  position: number;
  authority?: number;
  themes?: readonly string[];
  gaps?: readonly string[];
  selected?: boolean;
}
export interface SERPResearchPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  pages?: readonly SERPPage[];
  query?: ReactNode;
  recurringThemes?: readonly string[];
  evidenceGaps?: readonly string[];
  onSelect?: (page: SERPPage) => void;
}
const sampleSerpPages: readonly SERPPage[] = [
  {
    id: "one",
    title: "AI support automation guide",
    url: "example.com/guide",
    position: 1,
    authority: 82,
    themes: ["routing", "knowledge"],
    gaps: ["Human approval"]
  },
  {
    id: "two",
    title: "Customer support AI platforms",
    url: "example.org/platforms",
    position: 2,
    authority: 76,
    themes: ["ROI", "integrations"],
    gaps: ["Agent governance"]
  },
  {
    id: "three",
    title: "Automating customer operations",
    url: "example.net/operations",
    position: 3,
    authority: 71,
    themes: ["workflows"],
    gaps: ["Verified outcomes"]
  }
];
export function SERPResearchPanel({
  className,
  evidenceGaps = ["Human approval boundaries", "Source verification", "Real outcome metrics"],
  onSelect,
  pages = sampleSerpPages,
  query = "AI customer support automation",
  recurringThemes = ["Ticket routing", "Knowledge bases", "Response time", "Integrations"],
  ...props
}: SERPResearchPanelProps) {
  const [tab, setTab] = useState<"pages" | "themes" | "gaps">("pages");
  return (
    <FeaturePanel
      className={cn("amro-serp-research", className)}
      eyebrow="Live SERP research"
      title={query}
      description={`${pages.length} competing pages analysed`}
      status={<StatusIndicator label="Evidence ready" status="success" />}
      {...props}
    >
      <div className="amro-serp-research__tabs" role="tablist">
        {(["pages", "themes", "gaps"] as const).map((item) => (
          <button
            aria-selected={tab === item}
            key={item}
            onClick={() => setTab(item)}
            role="tab"
            type="button"
          >
            {item}
          </button>
        ))}
      </div>
      {tab === "pages" && (
        <ol>
          {pages.map((page) => (
            <li key={page.id}>
              <span>{page.position}</span>
              <button onClick={() => onSelect?.(page)} type="button">
                <strong>{page.title}</strong>
                <small>{page.url}</small>
              </button>
              <Badge tone="neutral">DA {page.authority ?? "—"}</Badge>
            </li>
          ))}
        </ol>
      )}
      {tab === "themes" && (
        <div className="amro-serp-research__chips">
          {recurringThemes.map((theme) => (
            <Badge key={theme} tone="info">
              {theme}
            </Badge>
          ))}
        </div>
      )}
      {tab === "gaps" && (
        <ul className="amro-serp-research__gaps">
          {evidenceGaps.map((gap) => (
            <li key={gap}>
              <Target aria-hidden="true" />
              <span>
                <strong>{gap}</strong>
                <small>Weak or missing across current results</small>
              </span>
            </li>
          ))}
        </ul>
      )}
    </FeaturePanel>
  );
}

export interface KeywordCluster {
  id: string;
  label: string;
  volume?: number;
  difficulty?: number;
  kind: "primary" | "semantic" | "question";
}
export interface KeywordClusterMapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  keyword?: string;
  clusters?: readonly KeywordCluster[];
  onSelect?: (cluster: KeywordCluster) => void;
}
const sampleClusters: readonly KeywordCluster[] = [
  { id: "primary", label: "AI support automation", volume: 2400, difficulty: 61, kind: "primary" },
  {
    id: "semantic-1",
    label: "customer service AI",
    volume: 1800,
    difficulty: 58,
    kind: "semantic"
  },
  {
    id: "semantic-2",
    label: "automated support workflows",
    volume: 720,
    difficulty: 42,
    kind: "semantic"
  },
  {
    id: "question-1",
    label: "How does AI automate support?",
    volume: 390,
    difficulty: 31,
    kind: "question"
  },
  {
    id: "question-2",
    label: "Is customer support AI safe?",
    volume: 210,
    difficulty: 25,
    kind: "question"
  }
];
export function KeywordClusterMap({
  className,
  clusters = sampleClusters,
  keyword = "AI support automation",
  onSelect,
  ...props
}: KeywordClusterMapProps) {
  return (
    <div className={cn("amro-keyword-cluster", className)} {...props}>
      <header>
        <span>
          <strong>{keyword}</strong>
          <small>Semantic topic model</small>
        </span>
        <Badge tone="success">{clusters.length} opportunities</Badge>
      </header>
      <div>
        {clusters.map((cluster) => (
          <button
            data-kind={cluster.kind}
            key={cluster.id}
            onClick={() => onSelect?.(cluster)}
            type="button"
          >
            <strong>{cluster.label}</strong>
            <small>
              {cluster.volume?.toLocaleString()} searches · KD {cluster.difficulty}
            </small>
          </button>
        ))}
      </div>
      <footer>
        <span>
          <i data-kind="primary" />
          Primary
        </span>
        <span>
          <i data-kind="semantic" />
          Semantic
        </span>
        <span>
          <i data-kind="question" />
          Question
        </span>
      </footer>
    </div>
  );
}

export interface SearchIntentSelectorProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  value?: SearchIntent;
  onChange?: (intent: SearchIntent) => void;
}
const intentDetails: Record<SearchIntent, string> = {
  informational: "Learn or understand",
  commercial: "Compare possible solutions",
  transactional: "Take an immediate action",
  mixed: "Several intents share the results"
};
export function SearchIntentSelector({
  className,
  onChange,
  value: controlled,
  ...props
}: SearchIntentSelectorProps) {
  const [internal, setInternal] = useState<SearchIntent>("commercial");
  const value = controlled ?? internal;
  return (
    <fieldset className={cn("amro-search-intent", className)} {...props}>
      <legend>Search intent</legend>
      <div>
        {(Object.keys(intentDetails) as SearchIntent[]).map((intent) => (
          <label data-selected={value === intent} key={intent}>
            <input
              checked={value === intent}
              name="search-intent"
              onChange={() => {
                setInternal(intent);
                onChange?.(intent);
              }}
              type="radio"
            />
            <span>
              <strong>{intent}</strong>
              <small>{intentDetails[intent]}</small>
            </span>
          </label>
        ))}
      </div>
    </fieldset>
  );
}

export interface BriefSection {
  id: string;
  heading: string;
  questions: readonly string[];
  references: readonly string[];
  wordTarget: number;
  instructions?: string;
}
export interface ContentBriefCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  sections?: readonly BriefSection[];
  onChange?: (sections: readonly BriefSection[]) => void;
  onGenerateOutline?: (sections: readonly BriefSection[]) => void;
}
const sampleBriefSections: readonly BriefSection[] = [
  {
    id: "intro",
    heading: "What AI support automation means",
    questions: ["Which tasks are safe to automate?"],
    references: ["Industry benchmark report"],
    wordTarget: 350,
    instructions: "Define terms without hype."
  },
  {
    id: "workflow",
    heading: "How governed agents work",
    questions: ["Where does human approval belong?"],
    references: ["AmroAgents control model"],
    wordTarget: 700,
    instructions: "Use an operational example."
  }
];
export function ContentBriefCanvas({
  className,
  onChange,
  onGenerateOutline,
  sections = sampleBriefSections,
  ...props
}: ContentBriefCanvasProps) {
  const [items, setItems] = useState([...sections]);
  const total = items.reduce((sum, item) => sum + item.wordTarget, 0);
  const update = (id: string, patch: Partial<BriefSection>) => {
    const next = items.map((item) => (item.id === id ? { ...item, ...patch } : item));
    setItems(next);
    onChange?.(next);
  };
  return (
    <FeaturePanel
      className={cn("amro-content-brief", className)}
      eyebrow="Content brief"
      title="Article plan"
      description={`${items.length} sections · ${total.toLocaleString()} target words`}
      actions={
        <Button onClick={() => onGenerateOutline?.(items)} size="sm">
          Generate outline
          <Sparkles aria-hidden="true" />
        </Button>
      }
      {...props}
    >
      <div>
        {items.map((section, index) => (
          <article key={section.id}>
            <header>
              <span>{index + 1}</span>
              <Input
                aria-label={`Heading ${index + 1}`}
                value={section.heading}
                onChange={(event) => update(section.id, { heading: event.target.value })}
              />
              <label>
                <input
                  onChange={(event) =>
                    update(section.id, { wordTarget: Number(event.target.value) })
                  }
                  type="number"
                  value={section.wordTarget}
                />
                <span>words</span>
              </label>
            </header>
            <div>
              <span>
                <strong>Questions</strong>
                {section.questions.map((question) => (
                  <Badge key={question} tone="neutral">
                    {question}
                  </Badge>
                ))}
              </span>
              <span>
                <strong>References</strong>
                {section.references.map((reference) => (
                  <Badge key={reference} tone="info">
                    <Link2 aria-hidden="true" />
                    {reference}
                  </Badge>
                ))}
              </span>
            </div>
            <Textarea
              aria-label={`Instructions for ${section.heading}`}
              onChange={(event) => update(section.id, { instructions: event.target.value })}
              value={section.instructions ?? ""}
            />
          </article>
        ))}
      </div>
    </FeaturePanel>
  );
}

export interface OutlineNode {
  id: string;
  title: string;
  level: 2 | 3;
  suggested?: boolean;
  locked?: boolean;
}
export interface OutlineTreeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  nodes?: readonly OutlineNode[];
  onChange?: (nodes: readonly OutlineNode[]) => void;
  onAcceptSuggestion?: (node: OutlineNode) => void;
}
const sampleOutline: readonly OutlineNode[] = [
  { id: "one", title: "What support automation can safely handle", level: 2 },
  { id: "two", title: "Triage and knowledge retrieval", level: 3 },
  { id: "three", title: "The human approval boundary", level: 2, suggested: true },
  { id: "four", title: "Measuring verified outcomes", level: 2 }
];
export function OutlineTreeEditor({
  className,
  nodes = sampleOutline,
  onAcceptSuggestion,
  onChange,
  ...props
}: OutlineTreeEditorProps) {
  const [items, setItems] = useState([...nodes]);
  const move = (index: number, offset: number) => {
    const target = index + offset;
    if (target < 0 || target >= items.length) return;
    const next = [...items];
    [next[index], next[target]] = [next[target]!, next[index]!];
    setItems(next);
    onChange?.(next);
  };
  const remove = (id: string) => {
    const next = items.filter((item) => item.id !== id);
    setItems(next);
    onChange?.(next);
  };
  return (
    <div className={cn("amro-outline-editor", className)} {...props}>
      <header>
        <span>
          <strong>Article outline</strong>
          <small>Drag or use arrow controls to reorder</small>
        </span>
        <Badge tone="neutral">{items.length} headings</Badge>
      </header>
      <ol>
        {items.map((node, index) => (
          <li data-level={node.level} draggable key={node.id}>
            <GripVertical aria-hidden="true" />
            <span>
              <Badge tone={node.suggested ? "info" : "neutral"}>H{node.level}</Badge>
              <strong>{node.title}</strong>
              {node.suggested && <small>AI suggestion</small>}
            </span>
            <div>
              {node.suggested && (
                <button
                  aria-label={`Accept ${node.title}`}
                  onClick={() => onAcceptSuggestion?.(node)}
                  type="button"
                >
                  <Check aria-hidden="true" />
                </button>
              )}
              <button
                aria-label={`Move ${node.title} up`}
                disabled={index === 0}
                onClick={() => move(index, -1)}
                type="button"
              >
                <ArrowUp aria-hidden="true" />
              </button>
              <button
                aria-label={`Move ${node.title} down`}
                disabled={index === items.length - 1}
                onClick={() => move(index, 1)}
                type="button"
              >
                <ArrowDown aria-hidden="true" />
              </button>
              <button
                aria-label={`Remove ${node.title}`}
                onClick={() => remove(node.id)}
                type="button"
              >
                <X aria-hidden="true" />
              </button>
            </div>
          </li>
        ))}
      </ol>
      <Button
        onClick={() => {
          const next = [
            ...items,
            { id: `${Date.now()}`, title: "Untitled section", level: 2 as const }
          ];
          setItems(next);
          onChange?.(next);
        }}
        variant="secondary"
      >
        <Plus aria-hidden="true" />
        Add section
      </Button>
    </div>
  );
}

export interface ClientWorkspace {
  id: string;
  name: string;
  domain?: string;
  logoUrl?: string;
  credits?: number;
  documentCount?: number;
}
export interface ClientWorkspaceSwitcherProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onChange"
> {
  workspaces?: readonly ClientWorkspace[];
  value?: string;
  onChange?: (workspace: ClientWorkspace) => void;
  onCreate?: () => void;
}
const sampleWorkspaces: readonly ClientWorkspace[] = [
  { id: "amro", name: "Amro", domain: "amro.ai", credits: 2400, documentCount: 84 },
  {
    id: "northstar",
    name: "Northstar Labs",
    domain: "northstar.example",
    credits: 860,
    documentCount: 26
  }
];
export function ClientWorkspaceSwitcher({
  className,
  onChange,
  onCreate,
  value: controlled,
  workspaces = sampleWorkspaces,
  ...props
}: ClientWorkspaceSwitcherProps) {
  const [open, setOpen] = useState(false);
  const [internal, setInternal] = useState(workspaces[0]?.id);
  const value = controlled ?? internal;
  const selected = workspaces.find((workspace) => workspace.id === value);
  return (
    <div className={cn("amro-workspace-switcher", className)} {...props}>
      <button aria-expanded={open} onClick={() => setOpen((current) => !current)} type="button">
        <span className="amro-workspace-switcher__logo">{selected?.name.slice(0, 1)}</span>
        <span>
          <strong>{selected?.name ?? "Select workspace"}</strong>
          <small>{selected?.domain ?? "Brand-isolated content"}</small>
        </span>
        <ChevronRight aria-hidden="true" />
      </button>
      {open && (
        <div role="listbox" aria-label="Client workspaces">
          {workspaces.map((workspace) => (
            <button
              aria-selected={workspace.id === value}
              key={workspace.id}
              onClick={() => {
                setInternal(workspace.id);
                onChange?.(workspace);
                setOpen(false);
              }}
              role="option"
              type="button"
            >
              <span className="amro-workspace-switcher__logo">{workspace.name.slice(0, 1)}</span>
              <span>
                <strong>{workspace.name}</strong>
                <small>
                  {workspace.documentCount ?? 0} documents ·{" "}
                  {(workspace.credits ?? 0).toLocaleString()} credits
                </small>
              </span>
              {workspace.id === value && <Check aria-hidden="true" />}
            </button>
          ))}
          {onCreate && (
            <Button onClick={onCreate} variant="tertiary">
              <Plus aria-hidden="true" />
              New client workspace
            </Button>
          )}
        </div>
      )}
    </div>
  );
}

export interface BrandProfile {
  name: string;
  logoUrl?: string;
  colors: readonly string[];
  headingFont: string;
  bodyFont: string;
  tone: readonly string[];
}
export interface ClientBrandCapsuleProps extends HTMLAttributes<HTMLDivElement> {
  brand?: BrandProfile;
  onEdit?: () => void;
}
const sampleBrand: BrandProfile = {
  name: "Northstar Labs",
  colors: ["accent-teal", "accent-cyan", "surface-strong"],
  headingFont: "Display Sans",
  bodyFont: "Workhorse Sans",
  tone: ["Expert", "Direct", "Warm"]
};
export function ClientBrandCapsule({
  brand = sampleBrand,
  className,
  onEdit,
  ...props
}: ClientBrandCapsuleProps) {
  return (
    <Card className={cn("amro-brand-capsule", className)} {...props}>
      <header>
        <span className="amro-brand-capsule__logo">
          {brand.logoUrl ? <img alt="" src={brand.logoUrl} /> : brand.name.slice(0, 1)}
        </span>
        <span>
          <strong>{brand.name}</strong>
          <small>Active brand profile</small>
        </span>
        <StatusIndicator label="Applied" status="success" />
      </header>
      <div>
        <span>
          <small>Colours</small>
          <span>
            {brand.colors.map((color) => (
              <i data-color={color} key={color} title={color} />
            ))}
          </span>
        </span>
        <span>
          <small>Typography</small>
          <strong>
            {brand.headingFont} / {brand.bodyFont}
          </strong>
        </span>
        <span>
          <small>Tone</small>
          <span>
            {brand.tone.map((tone) => (
              <Badge key={tone} tone="neutral">
                {tone}
              </Badge>
            ))}
          </span>
        </span>
      </div>
      {onEdit && (
        <Button onClick={onEdit} variant="secondary">
          Edit brand profile
        </Button>
      )}
    </Card>
  );
}

export interface VoiceDimension {
  id: string;
  label: ReactNode;
  score: number;
  guidance?: ReactNode;
}
export interface BrandVoiceMeterProps extends HTMLAttributes<HTMLDivElement> {
  score?: number;
  dimensions?: readonly VoiceDimension[];
  terminologyMatches?: number;
  terminologyIssues?: number;
}
const voiceDimensions: readonly VoiceDimension[] = [
  { id: "tone", label: "Tone", score: 94, guidance: "Expert and direct" },
  { id: "clarity", label: "Clarity", score: 91, guidance: "Short, active sentences" },
  { id: "terms", label: "Terminology", score: 86, guidance: "2 preferred terms missing" }
];
export function BrandVoiceMeter({
  className,
  dimensions = voiceDimensions,
  score = 91,
  terminologyIssues = 2,
  terminologyMatches = 18,
  ...props
}: BrandVoiceMeterProps) {
  return (
    <FeaturePanel
      className={cn("amro-brand-voice", className)}
      eyebrow="Brand alignment"
      title={`${score}% aligned`}
      description={`${terminologyMatches} preferred terms matched · ${terminologyIssues} issues`}
      status={
        <StatusIndicator
          label={score >= 90 ? "On brand" : "Review tone"}
          status={score >= 90 ? "success" : "warning"}
        />
      }
      {...props}
    >
      <ul>
        {dimensions.map((dimension) => (
          <li key={dimension.id}>
            <span>
              <strong>{dimension.label}</strong>
              <small>{dimension.guidance}</small>
            </span>
            <meter max="100" value={dimension.score}>
              {dimension.score}%
            </meter>
            <strong>{dimension.score}</strong>
          </li>
        ))}
      </ul>
    </FeaturePanel>
  );
}

export interface ArticleSection {
  id: string;
  title: string;
  content: string;
  status?: "draft" | "generating" | "locked" | "issue";
}
export interface EditorialQualityDimension {
  id: string;
  label: ReactNode;
  score: number;
  guidance?: ReactNode;
}
export interface ArticleWorkspaceProps extends HTMLAttributes<HTMLDivElement> {
  title?: string;
  sections?: readonly ArticleSection[];
  activeSectionId?: string;
  quality?: readonly EditorialQualityDimension[];
  onSectionChange?: (id: string) => void;
  onContentChange?: (id: string, content: string) => void;
  onSave?: () => void;
}
const sampleArticleSections: readonly ArticleSection[] = [
  {
    id: "intro",
    title: "What support automation means",
    content:
      "AI support automation coordinates repetitive service work while preserving a clear boundary for human judgment.",
    status: "draft"
  },
  {
    id: "safe",
    title: "What agents can safely handle",
    content:
      "Classification, approved-knowledge retrieval, and structured workflow steps are strong candidates when each outcome remains inspectable.",
    status: "locked"
  },
  {
    id: "approval",
    title: "The human approval boundary",
    content: "Consequential external actions should pause for review.",
    status: "issue"
  }
];
export function ArticleWorkspace({
  activeSectionId,
  className,
  onContentChange,
  onSave,
  onSectionChange,
  quality = [
    { id: "complete", label: "Completeness", score: 88 },
    { id: "readability", label: "Readability", score: 92 },
    { id: "seo", label: "SEO coverage", score: 81 }
  ],
  sections = sampleArticleSections,
  title = "AI support automation: a governed approach",
  ...props
}: ArticleWorkspaceProps) {
  const [internalActive, setInternalActive] = useState(sections[0]?.id);
  const activeId = activeSectionId ?? internalActive;
  const section = sections.find((item) => item.id === activeId);
  return (
    <div className={cn("amro-article-workspace", className)} {...props}>
      <aside>
        <header>
          <strong>Outline</strong>
          <Badge tone="neutral">{sections.length}</Badge>
        </header>
        <nav aria-label="Article outline">
          {sections.map((item, index) => (
            <button
              aria-current={item.id === activeId ? "true" : undefined}
              key={item.id}
              onClick={() => {
                setInternalActive(item.id);
                onSectionChange?.(item.id);
              }}
              type="button"
            >
              <span>{index + 1}</span>
              <span>
                <strong>{item.title}</strong>
                <small>{item.status}</small>
              </span>
            </button>
          ))}
        </nav>
      </aside>
      <main>
        <header>
          <span>
            <small>Article draft</small>
            <strong>{title}</strong>
          </span>
          <Button onClick={onSave} size="sm" variant="secondary">
            Save draft
          </Button>
        </header>
        {section ? (
          <article>
            <h2>{section.title}</h2>
            <Textarea
              aria-label={`Content for ${section.title}`}
              onChange={(event) => onContentChange?.(section.id, event.target.value)}
              value={section.content}
            />
          </article>
        ) : (
          <EmptyNotice title="Choose a section" />
        )}
      </main>
      <aside>
        <header>
          <strong>Quality</strong>
          <StatusIndicator label="Needs review" status="warning" />
        </header>
        <ul>
          {quality.map((item) => (
            <li key={item.id}>
              <span>{item.label}</span>
              <meter max="100" value={item.score}>
                {item.score}%
              </meter>
              <strong>{item.score}</strong>
            </li>
          ))}
        </ul>
      </aside>
    </div>
  );
}

export type SectionAction = "generate" | "rewrite" | "lock" | "unlock";
export interface SectionGenerationControlProps extends HTMLAttributes<HTMLDivElement> {
  sectionTitle?: ReactNode;
  status?: "idle" | "generating" | "ready" | "locked" | "error";
  variants?: number;
  onAction?: (action: SectionAction, guidance?: string) => void;
}
export function SectionGenerationControl({
  className,
  onAction,
  sectionTitle = "The human approval boundary",
  status = "ready",
  variants = 2,
  ...props
}: SectionGenerationControlProps) {
  const [guidance, setGuidance] = useState("");
  const locked = status === "locked";
  return (
    <div className={cn("amro-section-control", className)} {...props}>
      <header>
        <span>
          <strong>{sectionTitle}</strong>
          <small>{locked ? "Protected from regeneration" : `${variants} generated variants`}</small>
        </span>
        <StatusIndicator
          label={status}
          status={
            status === "ready" || locked ? "success" : status === "generating" ? "loading" : status
          }
        />
      </header>
      <label>
        <span>Section guidance</span>
        <input
          disabled={locked}
          onChange={(event) => setGuidance(event.target.value)}
          placeholder="Add a fact, angle, or tone instruction…"
          value={guidance}
        />
      </label>
      <footer>
        <Button
          disabled={locked || status === "generating"}
          onClick={() => onAction?.("generate", guidance)}
        >
          <Sparkles aria-hidden="true" />
          Generate
        </Button>
        <Button
          disabled={locked || status === "generating"}
          onClick={() => onAction?.("rewrite", guidance)}
          variant="secondary"
        >
          <RefreshCw aria-hidden="true" />
          Rewrite
        </Button>
        <Button onClick={() => onAction?.(locked ? "unlock" : "lock")} variant="tertiary">
          <LockKeyhole aria-hidden="true" />
          {locked ? "Unlock" : "Lock"}
        </Button>
      </footer>
    </div>
  );
}

export type InlineAICommand = "shorten" | "expand" | "clarify" | "cite" | "tone" | "translate";
export interface InlineAICommandMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  open?: boolean;
  selection?: ReactNode;
  commands?: readonly InlineAICommand[];
  onSelect?: (command: InlineAICommand) => void;
  onClose?: () => void;
}
const commandLabels: Record<InlineAICommand, string> = {
  shorten: "Shorten",
  expand: "Expand",
  clarify: "Clarify",
  cite: "Add citation",
  tone: "Change tone",
  translate: "Translate"
};
export function InlineAICommandMenu({
  className,
  commands = ["shorten", "expand", "clarify", "cite", "tone", "translate"],
  onClose,
  onSelect,
  open = true,
  selection = "Consequential external actions",
  ...props
}: InlineAICommandMenuProps) {
  if (!open) return null;
  return (
    <div
      className={cn("amro-inline-ai-menu", className)}
      role="menu"
      aria-label="AI editing commands"
      {...props}
    >
      <header>
        <span>
          <Sparkles aria-hidden="true" />
          <small>Selected</small>
          <strong>{selection}</strong>
        </span>
        {onClose && (
          <button aria-label="Close AI commands" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <div>
        {commands.map((command) => (
          <button key={command} onClick={() => onSelect?.(command)} role="menuitem" type="button">
            {commandLabels[command]}
            <ChevronRight aria-hidden="true" />
          </button>
        ))}
      </div>
    </div>
  );
}

export interface ClaimReference {
  id: string;
  title: ReactNode;
  url?: string;
  passage?: ReactNode;
  publishedAt?: ReactNode;
  authority?: number;
}
export interface ClaimVerificationCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  claim?: ReactNode;
  reference?: ClaimReference;
  status?: "verified" | "partial" | "unsupported" | "checking";
  onOpenSource?: (reference: ClaimReference) => void;
  onReplace?: () => void;
}
const sampleReference: ClaimReference = {
  id: "source",
  title: "Customer operations benchmark 2026",
  url: "research.example/report",
  passage: "Respondents reported a 31% reduction in repetitive handling time.",
  publishedAt: "12 Jun 2026",
  authority: 88
};
export function ClaimVerificationCard({
  claim = "Governed automation reduced repetitive handling time by 31%.",
  className,
  onOpenSource,
  onReplace,
  reference = sampleReference,
  status = "verified",
  ...props
}: ClaimVerificationCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-claim-verification", className)}
      eyebrow="Claim verification"
      title={claim}
      status={
        <StatusIndicator
          label={status}
          status={
            status === "verified"
              ? "success"
              : status === "checking"
                ? "loading"
                : status === "partial"
                  ? "warning"
                  : "error"
          }
        />
      }
      {...props}
    >
      <blockquote>
        <Quote aria-hidden="true" />
        <p>{reference.passage}</p>
        <cite>
          {reference.title} · {reference.publishedAt}
        </cite>
      </blockquote>
      <div>
        <Badge tone="neutral">Authority {reference.authority ?? "—"}/100</Badge>
        {onReplace && (
          <Button onClick={onReplace} variant="tertiary">
            Replace source
          </Button>
        )}
        {onOpenSource && (
          <Button onClick={() => onOpenSource(reference)} variant="secondary">
            Open source
            <Globe2 aria-hidden="true" />
          </Button>
        )}
      </div>
    </FeaturePanel>
  );
}

export interface CitationInspectorProps extends HTMLAttributes<HTMLDivElement> {
  reference?: ClaimReference;
  selectedPassage?: ReactNode;
  status?: "current" | "stale" | "low-quality";
  onUsePassage?: () => void;
  onOpenOriginal?: () => void;
}
export function CitationInspector({
  className,
  onOpenOriginal,
  onUsePassage,
  reference = sampleReference,
  selectedPassage,
  status = "current",
  ...props
}: CitationInspectorProps) {
  return (
    <div className={cn("amro-citation-inspector", className)} {...props}>
      <header>
        <span>
          <strong>{reference.title}</strong>
          <small>{reference.url}</small>
        </span>
        <StatusIndicator label={status} status={status === "current" ? "success" : "warning"} />
      </header>
      <dl>
        <div>
          <dt>Published</dt>
          <dd>{reference.publishedAt}</dd>
        </div>
        <div>
          <dt>Source quality</dt>
          <dd>{reference.authority ?? "—"}/100</dd>
        </div>
      </dl>
      <blockquote>{selectedPassage ?? reference.passage}</blockquote>
      <footer>
        {onOpenOriginal && (
          <Button onClick={onOpenOriginal} variant="tertiary">
            Open original
          </Button>
        )}
        {onUsePassage && (
          <Button onClick={onUsePassage}>
            Use passage
            <Link2 aria-hidden="true" />
          </Button>
        )}
      </footer>
    </div>
  );
}

export interface TrustPatternWarningProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  kind?: "statistic" | "quote" | "attribution";
  title?: ReactNode;
  excerpt?: ReactNode;
  reason?: ReactNode;
  blocking?: boolean;
  onFindSource?: () => void;
  onRemove?: () => void;
}
export function TrustPatternWarning({
  blocking = true,
  className,
  excerpt = "Teams save up to 60% of support time.",
  kind = "statistic",
  onFindSource,
  onRemove,
  reason = "No approved source supports this number.",
  title = "Unsupported statistic",
  ...props
}: TrustPatternWarningProps) {
  return (
    <div
      className={cn("amro-trust-warning", className)}
      role={blocking ? "alert" : "status"}
      {...props}
    >
      <CircleAlert aria-hidden="true" />
      <span>
        <span className="amro-eyebrow">
          {blocking ? "Publication blocked" : "Review recommended"} · {kind}
        </span>
        <strong>{title}</strong>
        <blockquote>{excerpt}</blockquote>
        <small>{reason}</small>
      </span>
      <div>
        {onRemove && (
          <Button onClick={onRemove} variant="tertiary">
            Remove claim
          </Button>
        )}
        {onFindSource && <Button onClick={onFindSource}>Find supporting source</Button>}
      </div>
    </div>
  );
}

export interface ContentQualityPanelProps extends HTMLAttributes<HTMLDivElement> {
  dimensions?: readonly EditorialQualityDimension[];
  overall?: number;
  mandatoryIssues?: number;
  warnings?: number;
  onOpenDimension?: (dimension: EditorialQualityDimension) => void;
}
const contentQuality: readonly EditorialQualityDimension[] = [
  { id: "complete", label: "Completeness", score: 94 },
  { id: "readability", label: "Readability", score: 91 },
  { id: "seo", label: "SEO", score: 84 },
  { id: "citations", label: "Citations", score: 78 },
  { id: "brand", label: "Brand alignment", score: 93 }
];
export function ContentQualityPanel({
  className,
  dimensions = contentQuality,
  mandatoryIssues = 1,
  onOpenDimension,
  overall = 88,
  warnings = 3,
  ...props
}: ContentQualityPanelProps) {
  return (
    <FeaturePanel
      className={cn("amro-content-quality", className)}
      eyebrow="Quality review"
      title={`${overall}/100`}
      description={`${mandatoryIssues} blocking issue · ${warnings} warnings`}
      status={
        <StatusIndicator
          label={mandatoryIssues ? "Not ready" : "Ready"}
          status={mandatoryIssues ? "blocked" : "success"}
        />
      }
      {...props}
    >
      <ul>
        {dimensions.map((dimension) => (
          <li key={dimension.id}>
            <button onClick={() => onOpenDimension?.(dimension)} type="button">
              <span>
                <strong>{dimension.label}</strong>
                <small>
                  {dimension.score >= 90
                    ? "Strong"
                    : dimension.score >= 80
                      ? "Review"
                      : "Needs work"}
                </small>
              </span>
              <meter max="100" value={dimension.score}>
                {dimension.score}%
              </meter>
              <strong>{dimension.score}</strong>
              <ChevronRight aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
    </FeaturePanel>
  );
}

export interface EditorialIssue {
  id: string;
  title: ReactNode;
  detail?: ReactNode;
  section?: ReactNode;
  severity: "blocking" | "warning" | "suggestion";
  resolved?: boolean;
}
export interface IssueNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  issues?: readonly EditorialIssue[];
  activeId?: string;
  onSelect?: (issue: EditorialIssue) => void;
  onResolve?: (issue: EditorialIssue) => void;
}
const sampleIssues: readonly EditorialIssue[] = [
  {
    id: "unsupported",
    title: "Unsupported statistic",
    detail: "60% time-saving claim needs evidence",
    section: "Introduction",
    severity: "blocking"
  },
  {
    id: "keyword",
    title: "Missing semantic term",
    detail: "Add “agent governance” naturally",
    section: "Safety",
    severity: "warning"
  },
  {
    id: "sentence",
    title: "Long sentence",
    detail: "42 words",
    section: "Workflow",
    severity: "suggestion"
  }
];
export function IssueNavigator({
  activeId,
  className,
  issues = sampleIssues,
  onResolve,
  onSelect,
  ...props
}: IssueNavigatorProps) {
  const unresolved = issues.filter((issue) => !issue.resolved);
  return (
    <div className={cn("amro-issue-navigator", className)} {...props}>
      <header>
        <span>
          <strong>Issues</strong>
          <small>{unresolved.length} unresolved</small>
        </span>
        <Badge
          tone={unresolved.some((issue) => issue.severity === "blocking") ? "info" : "neutral"}
        >
          {unresolved.filter((issue) => issue.severity === "blocking").length} blocking
        </Badge>
      </header>
      {unresolved.length ? (
        <ol>
          {unresolved.map((issue, index) => (
            <li data-active={issue.id === activeId} data-severity={issue.severity} key={issue.id}>
              <button onClick={() => onSelect?.(issue)} type="button">
                <span>{index + 1}</span>
                <span>
                  <strong>{issue.title}</strong>
                  <small>
                    {issue.section} · {issue.detail}
                  </small>
                </span>
                <ChevronRight aria-hidden="true" />
              </button>
              {onResolve && (
                <button
                  aria-label={`Resolve ${getAccessibleText(issue.title, "editorial issue")}`}
                  onClick={() => onResolve(issue)}
                  type="button"
                >
                  <Check aria-hidden="true" />
                </button>
              )}
            </li>
          ))}
        </ol>
      ) : (
        <EmptyNotice
          title="All issues resolved"
          description="The article is ready for its publication gate."
        />
      )}
    </div>
  );
}

export interface AIImageAsset {
  id: string;
  src: string;
  alt?: string;
  caption?: string;
  prompt?: string;
}
export interface AIImageSlotProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  asset?: AIImageAsset;
  status?: "empty" | "generating" | "ready" | "error";
  defaultPrompt?: string;
  onGenerate?: (prompt: string) => void;
  onReplace?: () => void;
  onChange?: (asset: AIImageAsset) => void;
}
export function AIImageSlot({
  asset,
  className,
  defaultPrompt = "A calm editorial illustration of a governed AI support workflow",
  onChange,
  onGenerate,
  onReplace,
  status = asset ? "ready" : "empty",
  ...props
}: AIImageSlotProps) {
  const [prompt, setPrompt] = useState(asset?.prompt ?? defaultPrompt);
  const [caption, setCaption] = useState(asset?.caption ?? "");
  const [alt, setAlt] = useState(asset?.alt ?? "");
  const update = (patch: Partial<AIImageAsset>) => {
    if (asset) onChange?.({ ...asset, ...patch });
  };
  return (
    <div className={cn("amro-ai-image-slot", className)} data-status={status} {...props}>
      <div className="amro-ai-image-slot__preview">
        {asset ? (
          <img alt={alt} src={asset.src} />
        ) : status === "generating" ? (
          <span>
            <Sparkles aria-hidden="true" />
            Generating editorial image…
          </span>
        ) : (
          <span>
            <ImageIcon aria-hidden="true" />
            No image generated
          </span>
        )}
        <StatusIndicator
          label={status}
          status={status === "ready" ? "success" : status === "generating" ? "loading" : status}
        />
      </div>
      <label>
        <span>Image prompt</span>
        <Textarea onChange={(event) => setPrompt(event.target.value)} value={prompt} />
      </label>
      <div>
        <Input
          label="Caption"
          onChange={(event) => {
            setCaption(event.target.value);
            update({ caption: event.target.value });
          }}
          value={caption}
        />
        <Input
          label="Alt text"
          onChange={(event) => {
            setAlt(event.target.value);
            update({ alt: event.target.value });
          }}
          value={alt}
        />
      </div>
      <footer>
        {onReplace && (
          <Button onClick={onReplace} variant="secondary">
            <Upload aria-hidden="true" />
            Replace
          </Button>
        )}
        <Button
          disabled={!prompt.trim() || status === "generating"}
          onClick={() => onGenerate?.(prompt)}
        >
          <RefreshCw aria-hidden="true" />
          {asset ? "Regenerate" : "Generate image"}
        </Button>
      </footer>
    </div>
  );
}

export interface FigureQualityCardProps extends HTMLAttributes<HTMLDivElement> {
  relevance?: number;
  captionComplete?: boolean;
  altTextComplete?: boolean;
  placement?: "good" | "review" | "poor";
  issues?: readonly ReactNode[];
  onFix?: () => void;
}
export function FigureQualityCard({
  altTextComplete = true,
  captionComplete = true,
  className,
  issues = [],
  onFix,
  placement = "good",
  relevance = 94,
  ...props
}: FigureQualityCardProps) {
  const ready =
    relevance >= 80 &&
    captionComplete &&
    altTextComplete &&
    placement === "good" &&
    issues.length === 0;
  return (
    <FeaturePanel
      className={cn("amro-figure-quality", className)}
      eyebrow="Figure quality"
      title={`${relevance}/100 relevance`}
      status={
        <StatusIndicator
          label={ready ? "Ready" : "Needs work"}
          status={ready ? "success" : "warning"}
        />
      }
      {...props}
    >
      <ul>
        <li data-pass={relevance >= 80}>
          <ImageIcon aria-hidden="true" />
          <span>
            <strong>Article relevance</strong>
            <small>{relevance}% semantic match</small>
          </span>
        </li>
        <li data-pass={captionComplete}>
          <BookOpenCheck aria-hidden="true" />
          <span>
            <strong>Caption</strong>
            <small>{captionComplete ? "Descriptive caption present" : "Caption missing"}</small>
          </span>
        </li>
        <li data-pass={altTextComplete}>
          <Accessibility aria-hidden="true" />
          <span>
            <strong>Accessibility</strong>
            <small>{altTextComplete ? "Alt text present" : "Alt text missing"}</small>
          </span>
        </li>
        <li data-pass={placement === "good"}>
          <MapPin aria-hidden="true" />
          <span>
            <strong>Placement</strong>
            <small>
              {placement === "good" ? "Supports nearby content" : "Review article position"}
            </small>
          </span>
        </li>
      </ul>
      {issues.length > 0 && (
        <div>
          {issues.map((issue, index) => (
            <span key={index}>
              <CircleAlert aria-hidden="true" />
              {issue}
            </span>
          ))}
        </div>
      )}
      {onFix && !ready && <Button onClick={onFix}>Fix figure issues</Button>}
    </FeaturePanel>
  );
}

export interface LinkSuggestion {
  id: string;
  destination: string;
  title: ReactNode;
  anchor: string;
  relevance: number;
  reason?: ReactNode;
}
export interface InternalLinkSuggestionProps extends HTMLAttributes<HTMLDivElement> {
  suggestion?: LinkSuggestion;
  onInsert?: (suggestion: LinkSuggestion) => void;
  onDismiss?: (suggestion: LinkSuggestion) => void;
}
const sampleLink: LinkSuggestion = {
  id: "link",
  destination: "/components/human-approval-pipeline",
  title: "Human approval pipeline",
  anchor: "human approval boundary",
  relevance: 94,
  reason: "The destination explains the governance pattern referenced in this paragraph."
};
export function InternalLinkSuggestion({
  className,
  onDismiss,
  onInsert,
  suggestion = sampleLink,
  ...props
}: InternalLinkSuggestionProps) {
  return (
    <Card className={cn("amro-internal-link", className)} {...props}>
      <header>
        <Link2 aria-hidden="true" />
        <span>
          <span className="amro-eyebrow">Internal link suggestion</span>
          <strong>{suggestion.title}</strong>
          <small>{suggestion.destination}</small>
        </span>
        <Badge tone="success">{suggestion.relevance}% relevant</Badge>
      </header>
      <p>{suggestion.reason}</p>
      <div>
        <span>Suggested anchor</span>
        <code>{suggestion.anchor}</code>
      </div>
      <footer>
        {onDismiss && (
          <Button onClick={() => onDismiss(suggestion)} variant="tertiary">
            Dismiss
          </Button>
        )}
        {onInsert && <Button onClick={() => onInsert(suggestion)}>Insert link</Button>}
      </footer>
    </Card>
  );
}

export interface ArticleMetadata {
  title: string;
  description: string;
  slug: string;
}
export interface MetadataPreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: ArticleMetadata;
  siteName?: ReactNode;
  domain?: string;
  onChange?: (metadata: ArticleMetadata) => void;
}
export function MetadataPreview({
  className,
  domain = "amro.ai",
  onChange,
  siteName = "Amro",
  value = {
    title: "AI support automation: a governed approach",
    description:
      "Learn where AI support agents create value, where human approval belongs, and how to measure verified outcomes.",
    slug: "ai-support-automation"
  },
  ...props
}: MetadataPreviewProps) {
  const [metadata, setMetadata] = useState(value);
  const update = <K extends keyof ArticleMetadata>(key: K, next: ArticleMetadata[K]) => {
    const updated = { ...metadata, [key]: next };
    setMetadata(updated);
    onChange?.(updated);
  };
  return (
    <div className={cn("amro-metadata-preview", className)} {...props}>
      <section>
        <span className="amro-eyebrow">Search preview</span>
        <div>
          <small>
            {siteName} · {domain}/{metadata.slug}
          </small>
          <strong>{metadata.title}</strong>
          <p>{metadata.description}</p>
        </div>
      </section>
      <form>
        <Input
          label="SEO title"
          maxLength={60}
          value={metadata.title}
          onChange={(event) => update("title", event.target.value)}
        />
        <small>{metadata.title.length}/60</small>
        <label>
          <span>Meta description</span>
          <Textarea
            maxLength={160}
            onChange={(event) => update("description", event.target.value)}
            value={metadata.description}
          />
        </label>
        <small>{metadata.description.length}/160</small>
        <Input
          label="URL slug"
          value={metadata.slug}
          onChange={(event) => update("slug", event.target.value)}
        />
      </form>
    </div>
  );
}

export interface ContentVersion {
  id: string;
  label: ReactNode;
  author: ReactNode;
  timestamp: ReactNode;
  kind: "generated" | "edited" | "reviewed" | "exported";
  current?: boolean;
}
export interface ContentVersionTimelineProps extends HTMLAttributes<HTMLOListElement> {
  versions?: readonly ContentVersion[];
  onRestore?: (version: ContentVersion) => void;
  onCompare?: (version: ContentVersion) => void;
}
const sampleVersions: readonly ContentVersion[] = [
  {
    id: "v4",
    label: "Ready for publication",
    author: "Maya",
    timestamp: "Today, 11:42",
    kind: "reviewed",
    current: true
  },
  { id: "v3", label: "Editorial edits", author: "Maya", timestamp: "Today, 11:18", kind: "edited" },
  {
    id: "v2",
    label: "Quality rewrite",
    author: "AmroPilot",
    timestamp: "Today, 10:56",
    kind: "generated"
  },
  {
    id: "v1",
    label: "Initial draft",
    author: "AmroPilot",
    timestamp: "Today, 10:31",
    kind: "generated"
  }
];
export function ContentVersionTimeline({
  className,
  onCompare,
  onRestore,
  versions = sampleVersions,
  ...props
}: ContentVersionTimelineProps) {
  return (
    <ol className={cn("amro-version-timeline", className)} {...props}>
      {versions.map((version) => (
        <li data-kind={version.kind} key={version.id}>
          <span>
            {version.current ? <CheckCircle2 aria-hidden="true" /> : <Clock3 aria-hidden="true" />}
          </span>
          <span>
            <strong>{version.label}</strong>
            <small>
              {version.author} · {version.timestamp}
            </small>
          </span>
          {version.current ? (
            <Badge tone="success">Current</Badge>
          ) : (
            <div>
              {onCompare && (
                <Button onClick={() => onCompare(version)} size="sm" variant="tertiary">
                  Compare
                </Button>
              )}
              {onRestore && (
                <Button onClick={() => onRestore(version)} size="sm" variant="secondary">
                  Restore
                </Button>
              )}
            </div>
          )}
        </li>
      ))}
    </ol>
  );
}

export interface ReviewComment {
  id: string;
  author: ReactNode;
  text: ReactNode;
  selection?: ReactNode;
  status?: "open" | "accepted" | "rejected";
}
export interface EditorReviewModeProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  comments?: readonly ReviewComment[];
  activeId?: string;
  onSelect?: (comment: ReviewComment) => void;
  onDecision?: (comment: ReviewComment, decision: "accept" | "reject") => void;
  onAddComment?: (text: string) => void;
}
const sampleComments: readonly ReviewComment[] = [
  {
    id: "one",
    author: "Maya Chen",
    text: "Can we support this with the benchmark source?",
    selection: "reduced repetitive handling time",
    status: "open"
  },
  {
    id: "two",
    author: "Alex Morgan",
    text: "Use the approved term “control boundary”.",
    selection: "approval step",
    status: "open"
  }
];
export function EditorReviewMode({
  activeId,
  className,
  comments = sampleComments,
  onAddComment,
  onDecision,
  onSelect,
  ...props
}: EditorReviewModeProps) {
  const [draft, setDraft] = useState("");
  return (
    <div className={cn("amro-review-mode", className)} {...props}>
      <header>
        <span>
          <MessageSquare aria-hidden="true" />
          <strong>Review comments</strong>
        </span>
        <Badge tone="neutral">
          {comments.filter((comment) => comment.status === "open").length} open
        </Badge>
      </header>
      <ol>
        {comments.map((comment) => (
          <li data-active={comment.id === activeId} key={comment.id}>
            <button onClick={() => onSelect?.(comment)} type="button">
              <span>
                <strong>{comment.author}</strong>
                <Badge tone={comment.status === "accepted" ? "success" : "neutral"}>
                  {comment.status}
                </Badge>
              </span>
              {comment.selection && <blockquote>{comment.selection}</blockquote>}
              <p>{comment.text}</p>
            </button>
            {comment.status === "open" && onDecision && (
              <footer>
                <Button onClick={() => onDecision(comment, "reject")} size="sm" variant="tertiary">
                  Reject
                </Button>
                <Button onClick={() => onDecision(comment, "accept")} size="sm">
                  Accept
                </Button>
              </footer>
            )}
          </li>
        ))}
      </ol>
      {onAddComment && (
        <form
          onSubmit={(event) => {
            event.preventDefault();
            if (draft.trim()) {
              onAddComment(draft);
              setDraft("");
            }
          }}
        >
          <input
            aria-label="Add review comment"
            onChange={(event) => setDraft(event.target.value)}
            placeholder="Add a comment…"
            value={draft}
          />
          <Button disabled={!draft.trim()} size="sm" type="submit">
            Comment
          </Button>
        </form>
      )}
    </div>
  );
}

export type ExportFormat = "pdf" | "docx" | "html" | "cms";
export interface ExportFormatOption {
  id: ExportFormat;
  label: ReactNode;
  detail: ReactNode;
  ready?: boolean;
}
export interface ExportFormatTrayProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  formats?: readonly ExportFormatOption[];
  onSelect?: (format: ExportFormat) => void;
  disabled?: boolean;
}
const exportFormats: readonly ExportFormatOption[] = [
  { id: "pdf", label: "PDF", detail: "Branded, print-ready", ready: true },
  { id: "docx", label: "DOCX", detail: "Editable document", ready: true },
  { id: "html", label: "HTML", detail: "Clean semantic markup", ready: true },
  { id: "cms", label: "CMS payload", detail: "Webhook delivery", ready: false }
];
export function ExportFormatTray({
  className,
  disabled = false,
  formats = exportFormats,
  onSelect,
  ...props
}: ExportFormatTrayProps) {
  return (
    <div className={cn("amro-export-tray", className)} {...props}>
      <header>
        <span>
          <strong>Export article</strong>
          <small>Select a production format</small>
        </span>
        <StatusIndicator
          label={disabled ? "Blocked by quality gate" : "Ready to export"}
          status={disabled ? "blocked" : "success"}
        />
      </header>
      <div>
        {formats.map((format) => (
          <button
            disabled={disabled || format.ready === false}
            key={format.id}
            onClick={() => onSelect?.(format.id)}
            type="button"
          >
            <span>
              {format.id === "html" || format.id === "cms" ? (
                <Code2 aria-hidden="true" />
              ) : (
                <FileText aria-hidden="true" />
              )}
            </span>
            <span>
              <strong>{format.label}</strong>
              <small>{format.detail}</small>
            </span>
            <Download aria-hidden="true" />
          </button>
        ))}
      </div>
    </div>
  );
}

export interface BrandedExportPreviewProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  brand?: BrandProfile;
  title?: ReactNode;
  author?: ReactNode;
  sections?: readonly { heading: ReactNode; body: ReactNode }[];
  page?: number;
  pages?: number;
  onPageChange?: (page: number) => void;
}
export function BrandedExportPreview({
  author = "Amro editorial team",
  brand = sampleBrand,
  className,
  onPageChange,
  page = 1,
  pages = 4,
  sections = [
    {
      heading: "What support automation means",
      body: "AI support automation coordinates repetitive service work while preserving a visible boundary for human judgment."
    },
    {
      heading: "Where governance belongs",
      body: "Approval gates keep consequential external actions under human control."
    }
  ],
  title = "AI support automation: a governed approach",
  ...props
}: BrandedExportPreviewProps) {
  return (
    <div className={cn("amro-branded-preview", className)} {...props}>
      <header>
        <span>
          <Eye aria-hidden="true" />
          <strong>Branded export preview</strong>
        </span>
        <span>
          Page {page} of {pages}
        </span>
      </header>
      <article>
        <div className="amro-branded-preview__brand">
          <span>{brand.name.slice(0, 1)}</span>
          <strong>{brand.name}</strong>
        </div>
        <h1>{title}</h1>
        <p className="amro-branded-preview__byline">By {author}</p>
        {sections.map((section, index) => (
          <section key={index}>
            <h2>{section.heading}</h2>
            <p>{section.body}</p>
          </section>
        ))}
        <footer>
          {brand.name} · {page}
        </footer>
      </article>
      <nav aria-label="Preview pages">
        <Button disabled={page <= 1} onClick={() => onPageChange?.(page - 1)} variant="secondary">
          Previous
        </Button>
        <Button
          disabled={page >= pages}
          onClick={() => onPageChange?.(page + 1)}
          variant="secondary"
        >
          Next
        </Button>
      </nav>
    </div>
  );
}

export interface WebhookTestResult {
  status: number;
  durationMs: number;
  response: ReactNode;
}
export interface CMSWebhookTesterProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
  defaultEndpoint?: string;
  payload?: string;
  state?: "idle" | "testing" | "success" | "error";
  result?: WebhookTestResult;
  onSubmit?: (endpoint: string, payload: string) => void;
}
export function CMSWebhookTester({
  className,
  defaultEndpoint = "https://cms.example/api/articles",
  onSubmit,
  payload = '{\n  "title": "AI support automation",\n  "status": "draft"\n}',
  result = { status: 201, durationMs: 284, response: "Article draft created" },
  state = "idle",
  ...props
}: CMSWebhookTesterProps) {
  const [endpoint, setEndpoint] = useState(defaultEndpoint);
  const [body, setBody] = useState(payload);
  return (
    <form
      className={cn("amro-webhook-tester", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit?.(endpoint, body);
      }}
      {...props}
    >
      <header>
        <span>
          <Webhook aria-hidden="true" />
          <span>
            <strong>CMS webhook tester</strong>
            <small>Send a non-publishing test payload</small>
          </span>
        </span>
        <StatusIndicator label={state} status={state === "testing" ? "loading" : state} />
      </header>
      <Input
        label="Endpoint"
        type="url"
        value={endpoint}
        onChange={(event) => setEndpoint(event.target.value)}
      />
      <label>
        <span>Payload preview</span>
        <Textarea
          onChange={(event) => setBody(event.target.value)}
          spellCheck="false"
          value={body}
        />
      </label>
      {state === "success" || state === "error" ? (
        <div data-state={state}>
          <strong>
            HTTP {result.status} · {result.durationMs} ms
          </strong>
          <code>{result.response}</code>
        </div>
      ) : null}
      <footer>
        <Button disabled={!endpoint.trim() || state === "testing"} type="submit">
          Test endpoint
          <Webhook aria-hidden="true" />
        </Button>
      </footer>
    </form>
  );
}

export interface CreditForecastItem {
  id: string;
  label: ReactNode;
  credits: number;
  required?: boolean;
}
export interface CreditForecastProps extends HTMLAttributes<HTMLDivElement> {
  items?: readonly CreditForecastItem[];
  balance?: number;
  onGenerate?: () => void;
}
const forecastItems: readonly CreditForecastItem[] = [
  { id: "research", label: "SERP research", credits: 120, required: true },
  { id: "draft", label: "Article generation", credits: 420, required: true },
  { id: "images", label: "3 editorial images", credits: 180 },
  { id: "quality", label: "Quality and citation review", credits: 90, required: true }
];
export function CreditForecast({
  balance = 1200,
  className,
  items = forecastItems,
  onGenerate,
  ...props
}: CreditForecastProps) {
  const total = items.reduce((sum, item) => sum + item.credits, 0);
  const enough = balance >= total;
  return (
    <FeaturePanel
      className={cn("amro-credit-forecast", className)}
      eyebrow="Before generation"
      title={`${total.toLocaleString()} credits estimated`}
      description={`${balance.toLocaleString()} available after workspace limits`}
      status={
        <StatusIndicator
          label={enough ? "Within balance" : "Insufficient balance"}
          status={enough ? "success" : "blocked"}
        />
      }
      {...props}
    >
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <span>
              {item.label}
              {item.required && <small>Required</small>}
            </span>
            <strong>{item.credits}</strong>
          </li>
        ))}
      </ul>
      <footer>
        <span>
          Estimated remaining <strong>{Math.max(0, balance - total).toLocaleString()}</strong>
        </span>
        {onGenerate && (
          <Button disabled={!enough} onClick={onGenerate}>
            Generate article
            <Sparkles aria-hidden="true" />
          </Button>
        )}
      </footer>
    </FeaturePanel>
  );
}

export type ArticleStatus = "researching" | "drafting" | "review" | "ready" | "published";
export interface ArticleStatusCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  status?: ArticleStatus;
  title?: ReactNode;
  progress?: number;
  updatedAt?: ReactNode;
  owner?: ReactNode;
  issues?: number;
  onOpen?: () => void;
}
const articleStatusLabel: Record<ArticleStatus, string> = {
  researching: "Researching",
  drafting: "Drafting",
  review: "Needs review",
  ready: "Ready",
  published: "Published"
};
export function ArticleStatusCard({
  className,
  issues = 1,
  onOpen,
  owner = "Maya Chen",
  progress = 88,
  status = "review",
  title = "AI support automation: a governed approach",
  updatedAt = "Updated 4 min ago",
  ...props
}: ArticleStatusCardProps) {
  return (
    <Card className={cn("amro-article-status", className)} {...props}>
      <header>
        <span>
          <FileText aria-hidden="true" />
        </span>
        <span>
          <strong>{title}</strong>
          <small>
            {owner} · {updatedAt}
          </small>
        </span>
        <StatusIndicator
          label={articleStatusLabel[status]}
          status={
            status === "published" || status === "ready"
              ? "success"
              : status === "review"
                ? "warning"
                : "active"
          }
        />
      </header>
      <div>
        <progress max="100" value={progress}>
          {progress}%
        </progress>
        <strong>{progress}%</strong>
      </div>
      <footer>
        <span>
          {issues ? (
            <>
              <CircleAlert aria-hidden="true" />
              {issues} unresolved issue
            </>
          ) : (
            <>
              <Check aria-hidden="true" />
              Quality gate passed
            </>
          )}
        </span>
        {onOpen && (
          <Button onClick={onOpen} variant="secondary">
            Open article
            <ChevronRight aria-hidden="true" />
          </Button>
        )}
      </footer>
    </Card>
  );
}
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-foundation.md

Shared AmroUI primitives, design tokens, and component styling.

# AmroUI Foundation

Shared AmroUI primitives, design tokens, and component styling.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-foundation.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-foundation.json)

## Source

### source/components/amro-ui-logo.tsx

```tsx
import { useId, type SVGProps } from "react";

export interface AmroUILogoProps extends Omit<SVGProps<SVGSVGElement>, "color"> {
  variant?: "dark" | "light";
  mode?: "full" | "mark";
  title?: string;
}

function Mark({ gradientId }: { gradientId: string }) {
  return (
    <g>
      <path
        fill={`url(#${gradientId})`}
        d="M16 130 80 17c3-6 8-9 15-9h31c8 0 12 9 8 16l-22 38H92L65 111c-6 10-15 16-27 19l-16 4c-5 1-9-1-6-4Z"
      />
      <path
        fill={`url(#${gradientId})`}
        d="m142 45 45 82c3 6 0 10-6 8l-25-7c-12-3-21-9-27-19l-17-29H88l13-23h22l11-19c2-4 6-4 8 0v7Z"
      />
    </g>
  );
}

export function AmroUILogo({
  variant = "dark",
  mode = "full",
  title = "AmroUI",
  ...props
}: AmroUILogoProps) {
  const id = useId().replace(/:/g, "");
  const gradientId = `amro-gradient-${id}`;
  const wordmark = variant === "dark" ? "var(--amro-foreground)" : "var(--amro-foreground)";

if (mode === "mark") {
    return (
      <svg viewBox="0 0 200 150" role="img" aria-label={title} {...props}>
        <defs>
          <linearGradient
            id={gradientId}
            x1="48"
            y1="18"
            x2="151"
            y2="133"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="var(--amro-accent-teal)" />
            <stop offset="1" stopColor="var(--amro-accent-cyan)" />
          </linearGradient>
        </defs>
        <Mark gradientId={gradientId} />
      </svg>
    );
  }

return (
    <svg viewBox="0 0 360 238" role="img" aria-label={title} {...props}>
      <defs>
        <linearGradient
          id={gradientId}
          x1="92"
          y1="14"
          x2="230"
          y2="165"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="var(--amro-accent-teal)" />
          <stop offset="1" stopColor="var(--amro-accent-cyan)" />
        </linearGradient>
      </defs>
      <g transform="translate(80 0)">
        <Mark gradientId={gradientId} />
      </g>
      <text
        x="20"
        y="198"
        fill={wordmark}
        fontFamily="Inter, Arial, sans-serif"
        fontSize="58"
        fontWeight="700"
        letterSpacing="5"
      >
        AMRO
      </text>
      <text
        x="248"
        y="198"
        fill={`url(#${gradientId})`}
        fontFamily="Inter, Arial, sans-serif"
        fontSize="58"
        fontWeight="700"
        letterSpacing="5"
      >
        UI
      </text>
      <text
        x="54"
        y="230"
        fill="var(--amro-foreground-muted)"
        fontFamily="Inter, Arial, sans-serif"
        fontSize="13"
        fontWeight="560"
        letterSpacing="9"
      >
        AI UI PLATFORM
      </text>
    </svg>
  );
}
```

### source/components/avatar.tsx

```tsx
import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
  name: string;
  src?: string;
  imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">;
}

function initials(name: string) {
  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("");
}

export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
  ({ className, name, src, imageProps, ...props }, ref) => (
    <span
      ref={ref}
      className={cn("amro-avatar", className)}
      aria-label={name}
      role="img"
      {...props}
    >
      {src ? (
        <img src={src} alt="" {...imageProps} />
      ) : (
        <span aria-hidden="true">{initials(name)}</span>
      )}
    </span>
  )
);
Avatar.displayName = "Avatar";
```

### source/components/badge.tsx

```tsx
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

const badgeVariants = cva("amro-badge", {
  variants: {
    tone: {
      neutral: "amro-badge--neutral",
      success: "amro-badge--success",
      info: "amro-badge--info"
    }
  },
  defaultVariants: { tone: "neutral" }
});

export interface BadgeProps
  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
  dot?: boolean;
}

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, tone, dot = false, children, ...props }, ref) => (
    <span ref={ref} className={cn(badgeVariants({ tone }), className)} {...props}>
      {dot ? <span className="amro-badge__dot" aria-hidden="true" /> : null}
      {children}
    </span>
  )
);
Badge.displayName = "Badge";

export const StatusPill = Badge;
export type StatusPillProps = BadgeProps;
```

### source/components/button.tsx

```tsx
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef, type ButtonHTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

const buttonVariants = cva("amro-button", {
  variants: {
    variant: {
      primary: "amro-button--primary",
      secondary: "amro-button--secondary",
      tertiary: "amro-button--tertiary"
    },
    size: {
      sm: "amro-button--sm",
      md: "amro-button--md",
      lg: "amro-button--lg"
    }
  },
  defaultVariants: { variant: "primary", size: "md" }
});

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, type = "button", ...props }, ref) => (
    <button
      ref={ref}
      type={type}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
);
Button.displayName = "Button";
```

### source/components/card.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  elevated?: boolean;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, elevated = false, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("amro-card", elevated && "amro-card--elevated", className)}
      {...props}
    />
  )
);
Card.displayName = "Card";
```

### source/components/divider.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
  orientation?: "horizontal" | "vertical";
}

export const Divider = forwardRef<HTMLHRElement, DividerProps>(
  ({ className, orientation = "horizontal", ...props }, ref) => (
    <hr
      ref={ref}
      className={cn("amro-divider", `amro-divider--${orientation}`, className)}
      aria-orientation={orientation}
      {...props}
    />
  )
);
Divider.displayName = "Divider";
```

### source/components/feature-primitives.tsx

```tsx
import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Badge, type BadgeProps } from "./badge.js";
import { Card, type CardProps } from "./card.js";

export interface FeaturePanelProps extends Omit<CardProps, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  eyebrow?: ReactNode;
  status?: ReactNode;
  actions?: ReactNode;
  footer?: ReactNode;
}

export const FeaturePanel = forwardRef<HTMLDivElement, FeaturePanelProps>(
  (
    { actions, children, className, description, eyebrow, footer, status, title, ...props },
    ref
  ) => (
    <Card ref={ref} className={cn("amro-feature-panel", className)} {...props}>
      {(eyebrow !== undefined || title !== undefined || actions !== undefined) && (
        <header className="amro-feature-panel__header">
          <div className="amro-feature-panel__heading">
            {eyebrow !== undefined && <span className="amro-eyebrow">{eyebrow}</span>}
            {title !== undefined && <strong className="amro-feature-panel__title">{title}</strong>}
            {description !== undefined && (
              <span className="amro-feature-panel__description">{description}</span>
            )}
          </div>
          {status !== undefined && <div className="amro-feature-panel__status">{status}</div>}
          {actions !== undefined && <div className="amro-feature-panel__actions">{actions}</div>}
        </header>
      )}
      <div className="amro-feature-panel__body">{children}</div>
      {footer !== undefined && <footer className="amro-feature-panel__footer">{footer}</footer>}
    </Card>
  )
);
FeaturePanel.displayName = "FeaturePanel";

export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
  status: AmroProcessStatus | AmroAsyncStatus | "online" | "offline" | "warning";
  label?: ReactNode;
}

const statusTone: Record<StatusIndicatorProps["status"], NonNullable<BadgeProps["tone"]>> = {
  active: "info",
  blocked: "info",
  complete: "success",
  empty: "neutral",
  error: "neutral",
  idle: "neutral",
  loading: "info",
  offline: "neutral",
  online: "success",
  pending: "neutral",
  success: "success",
  warning: "info"
};

export const StatusIndicator = forwardRef<HTMLSpanElement, StatusIndicatorProps>(
  ({ className, label, status, ...props }, ref) => (
    <Badge
      ref={ref}
      className={cn("amro-status-indicator", `amro-status-indicator--${status}`, className)}
      dot
      tone={statusTone[status]}
      {...props}
    >
      {label ?? status}
    </Badge>
  )
);
StatusIndicator.displayName = "StatusIndicator";

export interface MetricItem {
  id: string;
  label: ReactNode;
  value: ReactNode;
  detail?: ReactNode;
}

export interface MetricGridProps extends HTMLAttributes<HTMLDListElement> {
  items: readonly MetricItem[];
  emptyLabel?: ReactNode;
}

export const MetricGrid = forwardRef<HTMLDListElement, MetricGridProps>(
  ({ className, emptyLabel = "No metrics yet", items, ...props }, ref) => (
    <dl ref={ref} className={cn("amro-metric-grid", className)} {...props}>
      {items.length === 0 ? (
        <div className="amro-empty-inline">{emptyLabel}</div>
      ) : (
        items.map((item) => (
          <div className="amro-metric" key={item.id}>
            <dt>{item.label}</dt>
            <dd>{item.value}</dd>
            {item.detail !== undefined && <small>{item.detail}</small>}
          </div>
        ))
      )}
    </dl>
  )
);
MetricGrid.displayName = "MetricGrid";

export interface ActionItem {
  id: string;
  label: ReactNode;
  onSelect?: () => void;
  disabled?: boolean;
  tone?: "primary" | "secondary" | "danger";
}

export interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {
  actions: readonly ActionItem[];
}

export const ActionRow = forwardRef<HTMLDivElement, ActionRowProps>(
  ({ actions, className, ...props }, ref) => (
    <div ref={ref} className={cn("amro-action-row", className)} {...props}>
      {actions.map((action) => (
        <button
          className={cn("amro-inline-action", `amro-inline-action--${action.tone ?? "secondary"}`)}
          disabled={action.disabled}
          key={action.id}
          onClick={action.onSelect}
          type="button"
        >
          {action.label}
        </button>
      ))}
    </div>
  )
);
ActionRow.displayName = "ActionRow";

export interface EmptyNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  action?: ReactNode;
}

export const EmptyNotice = forwardRef<HTMLDivElement, EmptyNoticeProps>(
  ({ action, className, description, title = "Nothing here yet", ...props }, ref) => (
    <div ref={ref} className={cn("amro-empty-notice", className)} {...props}>
      <strong>{title}</strong>
      {description !== undefined && <span>{description}</span>}
      {action !== undefined && <div>{action}</div>}
    </div>
  )
);
EmptyNotice.displayName = "EmptyNotice";
```

### source/components/input.tsx

```tsx
import { CalendarDays, ChevronDown, Clock3 } from "lucide-react";
import {
  forwardRef,
  useId,
  type InputHTMLAttributes,
  type ReactNode,
  type SelectHTMLAttributes,
  type TextareaHTMLAttributes
} from "react";
import { cn } from "../lib/cn.js";

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: ReactNode;
  hint?: ReactNode;
  error?: ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    { className, id: providedId, label, hint, error, "aria-describedby": describedBy, ...props },
    ref
  ) => {
    const generatedId = useId();
    const id = providedId ?? generatedId;
    const messageId = `${id}-message`;

return (
      <label className="amro-field" htmlFor={id}>
        {label ? <span className="amro-field__label">{label}</span> : null}
        <input
          ref={ref}
          id={id}
          className={cn("amro-input", className)}
          aria-invalid={error ? true : undefined}
          aria-describedby={error || hint ? messageId : describedBy}
          {...props}
        />
        {error || hint ? (
          <span
            id={messageId}
            className={cn("amro-field__message", error && "amro-field__message--error")}
          >
            {error ?? hint}
          </span>
        ) : null}
      </label>
    );
  }
);
Input.displayName = "Input";

export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  wrapperClassName?: string;
}

export const Select = forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, wrapperClassName, children, ...props }, ref) => (
    <span className={cn("amro-select", wrapperClassName)}>
      <select ref={ref} className={cn("amro-select__control", className)} {...props}>
        {children}
      </select>
      <ChevronDown aria-hidden="true" />
    </span>
  )
);
Select.displayName = "Select";

export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => (
    <textarea ref={ref} className={cn("amro-textarea", className)} {...props} />
  )
);
Textarea.displayName = "Textarea";

export type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
  ({ className, ...props }, ref) => (
    <span className="amro-date-control">
      <CalendarDays aria-hidden="true" />
      <input ref={ref} className={cn("amro-input", className)} type="date" {...props} />
    </span>
  )
);
DateInput.displayName = "DateInput";

export type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
  ({ className, ...props }, ref) => (
    <span className="amro-time-control">
      <Clock3 aria-hidden="true" />
      <input ref={ref} className={cn("amro-input", className)} type="time" {...props} />
    </span>
  )
);
TimeInput.displayName = "TimeInput";

export type RangeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;

export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(
  ({ className, ...props }, ref) => (
    <input ref={ref} className={cn("amro-range-input", className)} type="range" {...props} />
  )
);
RangeInput.displayName = "RangeInput";
```

### source/components/skeleton.tsx

```tsx
import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "../lib/cn.js";

export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  label?: string;
}

export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, label = "Loading", ...props }, ref) => (
    <div
      ref={ref}
      className={cn("amro-skeleton", className)}
      role="status"
      aria-label={label}
      {...props}
    >
      <span className="amro-visually-hidden">{label}</span>
    </div>
  )
);
Skeleton.displayName = "Skeleton";
```

### source/components/theme-segmented-toggle.tsx

```tsx
import { Moon, Sun } from "lucide-react";
import { useEffect, useState, type HTMLAttributes } from "react";
import type { AmroTheme } from "@amro-ui/tokens";
import { cn } from "../lib/cn.js";

const STORAGE_KEY = "amro-ui-theme";

function systemTheme(): AmroTheme {
  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}

function savedTheme(): AmroTheme | null {
  const value = window.localStorage.getItem(STORAGE_KEY);
  return value === "light" || value === "dark" ? value : null;
}

function applyTheme(theme: AmroTheme) {
  document.documentElement.dataset.theme = theme;
}

export interface ThemeSegmentedToggleProps extends HTMLAttributes<HTMLDivElement> {
  onThemeChange?: (theme: AmroTheme) => void;
}

export function ThemeSegmentedToggle({
  className,
  onThemeChange,
  ...props
}: ThemeSegmentedToggleProps) {
  const [theme, setTheme] = useState<AmroTheme>(() =>
    typeof window === "undefined" ? "dark" : (savedTheme() ?? systemTheme())
  );

useEffect(() => {
    applyTheme(theme);
  }, [theme]);

useEffect(() => {
    if (savedTheme()) return;
    const media = window.matchMedia("(prefers-color-scheme: light)");
    const listener = () => setTheme(media.matches ? "light" : "dark");
    media.addEventListener("change", listener);
    return () => media.removeEventListener("change", listener);
  }, []);

const choose = (nextTheme: AmroTheme) => {
    setTheme(nextTheme);
    applyTheme(nextTheme);
    window.localStorage.setItem(STORAGE_KEY, nextTheme);
    onThemeChange?.(nextTheme);
  };

return (
    <div
      className={cn("amro-theme-toggle", className)}
      role="group"
      aria-label="Color theme"
      {...props}
    >
      <button
        type="button"
        className="amro-theme-toggle__option"
        aria-label="Use light theme"
        aria-pressed={theme === "light"}
        onClick={() => choose("light")}
      >
        <Sun aria-hidden="true" size={16} strokeWidth={1.8} />
      </button>
      <button
        type="button"
        className="amro-theme-toggle__option"
        aria-label="Use dark theme"
        aria-pressed={theme === "dark"}
        onClick={() => choose("dark")}
      >
        <Moon aria-hidden="true" size={16} strokeWidth={1.8} />
      </button>
    </div>
  );
}
```

### source/components/tooltip.tsx

```tsx
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "../lib/cn.js";

export interface TooltipProps {
  children: ReactNode;
  content: ReactNode;
  side?: ComponentProps<typeof TooltipPrimitive.Content>["side"];
  delayDuration?: number;
}

export function Tooltip({ children, content, side = "top", delayDuration = 300 }: TooltipProps) {
  return (
    <TooltipPrimitive.Provider delayDuration={delayDuration}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal>
          <TooltipPrimitive.Content className={cn("amro-tooltip")} side={side} sideOffset={8}>
            {content}
            <TooltipPrimitive.Arrow className="amro-tooltip__arrow" />
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
}
```

### source/lib/cn.ts

```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

### source/amro-ui.css

```css
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --amro-background: #0b1118;
  --amro-surface: #111a24;
  --amro-surface-strong: #667a96;
  --amro-foreground: #d8e1ec;
  --amro-foreground-muted: #667a96;
  --amro-border: #667a96;
  --amro-accent-teal: #20c8c3;
  --amro-accent-cyan: #35b8f2;
  --amro-on-accent: #0b1118;
  --amro-status-success: #20c8c3;
  --amro-status-warning: #35b8f2;
  --amro-status-danger: #d8e1ec;
  --amro-focus: #35b8f2;
}

[data-theme="light"] {
  color-scheme: light;
  --amro-background: #ffffff;
  --amro-surface: #f6f8fb;
  --amro-surface-strong: #e7eef5;
  --amro-foreground: #0b1118;
  --amro-foreground-muted: #64748b;
  --amro-border: #e7eef5;
  --amro-accent-teal: #17b8a8;
  --amro-accent-cyan: #169fe8;
  --amro-on-accent: #0b1118;
  --amro-status-success: #17b8a8;
  --amro-status-warning: #169fe8;
  --amro-status-danger: #64748b;
  --amro-focus: #169fe8;
}

:root {
  --amro-space-0: 0px;
  --amro-space-1: 4px;
  --amro-space-2: 8px;
  --amro-space-3: 12px;
  --amro-space-4: 16px;
  --amro-space-5: 20px;
  --amro-space-6: 24px;
  --amro-space-8: 32px;
  --amro-space-10: 40px;
  --amro-space-12: 48px;
  --amro-space-16: 64px;
  --amro-space-20: 80px;
  --amro-space-24: 96px;

--amro-radius-control-sm: 8px;
  --amro-radius-control: 10px;
  --amro-radius-control-lg: 12px;
  --amro-radius-card: 18px;
  --amro-radius-card-lg: 24px;
  --amro-radius-full: 9999px;

--amro-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
  --amro-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
  --amro-font-body: 450;
  --amro-font-medium: 560;
  --amro-font-strong: 650;
  --amro-font-display: 740;
  --amro-text-xs: 0.75rem;
  --amro-text-sm: 0.875rem;
  --amro-text-md: 1rem;
  --amro-text-lg: 1.125rem;
  --amro-text-xl: 1.25rem;
  --amro-text-display-sm: 2rem;
  --amro-text-display: 3rem;
  --amro-leading-tight: 1.1;
  --amro-leading-snug: 1.3;
  --amro-leading-body: 1.55;

--amro-shadow-card: 0 16px 48px rgb(0 0 0 / 0.14);
  --amro-shadow-control: 0 8px 20px rgb(0 0 0 / 0.12);
  --amro-glow-active-ai:
    0 0 0 1px color-mix(in srgb, var(--amro-accent-teal) 42%, transparent),
    0 0 28px color-mix(in srgb, var(--amro-accent-cyan) 26%, transparent);

--amro-duration-instant: 100ms;
  --amro-duration-state: 180ms;
  --amro-duration-enter: 240ms;
  --amro-duration-progress: 600ms;
  --amro-duration-pulse: 1600ms;
  --amro-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --amro-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --amro-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --amro-duration-state: 1ms;
    --amro-duration-enter: 1ms;
    --amro-duration-progress: 1ms;
    --amro-duration-pulse: 1ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.amro-button,
.amro-input,
.amro-select__control,
.amro-textarea,
.amro-range-input,
.amro-theme-toggle__option {
  font: inherit;
}

.amro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-2);
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-5);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-strong);
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--amro-duration-state) var(--amro-ease-standard),
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.amro-button:active:not(:disabled) {
  transform: translateY(0);
}

.amro-button:focus-visible,
.amro-input:focus-visible,
.amro-select__control:focus-visible,
.amro-textarea:focus-visible,
.amro-range-input:focus-visible,
.amro-theme-toggle__option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.amro-button--primary {
  color: var(--amro-on-accent);
  background: linear-gradient(120deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}

.amro-button--secondary {
  border-color: color-mix(in srgb, var(--amro-border) 64%, transparent);
  background: color-mix(in srgb, var(--amro-surface) 68%, transparent);
}

.amro-button--secondary:hover:not(:disabled) {
  border-color: var(--amro-accent-teal);
  background: var(--amro-surface);
}

.amro-button--tertiary {
  color: var(--amro-accent-cyan);
  background: transparent;
}

.amro-button--tertiary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}

.amro-button--sm {
  min-height: 34px;
  padding-inline: var(--amro-space-3);
  font-size: var(--amro-text-xs);
}

.amro-button--lg {
  min-height: 50px;
  padding-inline: var(--amro-space-6);
  border-radius: var(--amro-radius-control-lg);
  font-size: var(--amro-text-md);
}

.amro-card {
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-card--elevated {
  border-radius: var(--amro-radius-card-lg);
  box-shadow: var(--amro-shadow-card);
}

.amro-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-medium);
  letter-spacing: 0.01em;
}

.amro-badge--neutral {
  color: var(--amro-foreground-muted);
  background: color-mix(in srgb, var(--amro-foreground-muted) 9%, transparent);
}

.amro-badge--success {
  color: var(--amro-status-success);
  background: color-mix(in srgb, var(--amro-status-success) 10%, transparent);
}

.amro-badge--info {
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}

.amro-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.amro-field {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-field__label {
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-4);
  color: var(--amro-foreground);
  caret-color: var(--amro-accent-teal);
  background: var(--amro-background);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-input::placeholder {
  color: var(--amro-foreground-muted);
}

.amro-input:hover {
  border-color: var(--amro-accent-teal);
}

.amro-input[aria-invalid="true"] {
  border-color: var(--amro-status-danger);
}

.amro-select,
.amro-date-control,
.amro-time-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-select__control {
  width: 100%;
  min-height: 44px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 calc(var(--amro-space-6) + var(--amro-space-3)) 0 var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-background);
  cursor: pointer;
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-select__control:hover,
.amro-select__control:focus-visible,
.amro-textarea:hover,
.amro-textarea:focus-visible {
  border-color: var(--amro-accent-teal);
}

.amro-select > svg {
  position: absolute;
  right: var(--amro-space-3);
  width: 16px;
  height: 16px;
  color: var(--amro-accent-cyan);
  pointer-events: none;
}

.amro-textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  caret-color: var(--amro-accent-teal);
  background: var(--amro-background);
  line-height: var(--amro-leading-body);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    box-shadow var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-textarea::placeholder {
  color: var(--amro-foreground-muted);
}

.amro-date-control,
.amro-time-control {
  width: 100%;
}

.amro-date-control > svg,
.amro-time-control > svg {
  position: absolute;
  left: var(--amro-space-3);
  z-index: 1;
  width: 17px;
  height: 17px;
  color: var(--amro-accent-cyan);
  pointer-events: none;
}

.amro-date-control > .amro-input,
.amro-time-control > .amro-input {
  padding-left: calc(var(--amro-space-6) + var(--amro-space-2));
  color-scheme: dark;
}

[data-theme="light"] .amro-date-control > .amro-input,
[data-theme="light"] .amro-time-control > .amro-input {
  color-scheme: light;
}

.amro-range-input {
  width: 100%;
  height: 6px;
  appearance: none;
  border-radius: var(--amro-radius-full);
  accent-color: var(--amro-accent-teal);
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  cursor: pointer;
}

.amro-range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 3px solid var(--amro-background);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow:
    0 0 0 1px var(--amro-accent-teal),
    var(--amro-glow-active-ai);
}

.amro-range-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--amro-background);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow:
    0 0 0 1px var(--amro-accent-teal),
    var(--amro-glow-active-ai);
}

.amro-field__message {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-field__message--error {
  color: var(--amro-status-danger);
}

.amro-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 48%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-strong);
}

.amro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-tooltip {
  z-index: 50;
  max-width: 260px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  line-height: var(--amro-leading-body);
  animation: amro-tooltip-in var(--amro-duration-enter) var(--amro-ease-enter);
}

.amro-tooltip__arrow {
  fill: var(--amro-surface);
}

.amro-divider {
  flex: none;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--amro-border) 48%, transparent);
}

.amro-divider--horizontal {
  width: 100%;
  height: 1px;
}

.amro-divider--vertical {
  align-self: stretch;
  width: 1px;
  min-height: 24px;
}

.amro-skeleton {
  min-height: 16px;
  overflow: hidden;
  border-radius: var(--amro-radius-control-sm);
  background: var(--amro-surface-strong);
  position: relative;
}

.amro-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--amro-foreground) 11%, transparent),
    transparent
  );
  transform: translateX(-100%);
  animation: amro-skeleton-progress var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}

.amro-theme-toggle {
  display: inline-flex;
  gap: var(--amro-space-1);
  border: 1px solid color-mix(in srgb, var(--amro-border) 64%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-1);
  background: var(--amro-surface);
}

.amro-theme-toggle__option {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: var(--amro-radius-control-sm);
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-theme-toggle__option[aria-pressed="true"] {
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amro-feature-panel {
  display: grid;
  gap: var(--amro-space-5);
  min-width: 0;
}

.amro-feature-panel__header {
  display: flex;
  align-items: flex-start;
  gap: var(--amro-space-3);
}

.amro-feature-panel__heading {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
  min-width: 0;
}

.amro-eyebrow {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amro-feature-panel__title {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-lg);
}

.amro-feature-panel__description {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
  line-height: var(--amro-leading-body);
}

.amro-feature-panel__status,
.amro-feature-panel__actions,
.amro-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-feature-panel__body {
  min-width: 0;
}

.amro-feature-panel__footer {
  border-top: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding-top: var(--amro-space-4);
}

.amro-status-indicator {
  text-transform: capitalize;
}

.amro-status-indicator--error {
  color: var(--amro-status-danger);
  background: color-mix(in srgb, var(--amro-status-danger) 10%, transparent);
}

.amro-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
}

.amro-metric {
  display: grid;
  gap: var(--amro-space-1);
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: color-mix(in srgb, var(--amro-background) 62%, transparent);
}

.amro-metric dt,
.amro-metric small {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-xs);
}

.amro-metric dd {
  margin: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--amro-font-strong);
}

.amro-inline-action {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  font-size: var(--amro-text-sm);
  cursor: pointer;
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    background var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-inline-action:hover:not(:disabled),
.amro-inline-action:focus-visible {
  border-color: var(--amro-accent-cyan);
}

.amro-inline-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-inline-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.amro-inline-action--primary {
  border-color: transparent;
  color: var(--amro-on-accent);
  background: linear-gradient(120deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-inline-action--danger {
  border-color: color-mix(in srgb, var(--amro-status-danger) 52%, transparent);
  color: var(--amro-status-danger);
}

.amro-empty-inline,
.amro-empty-notice {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
}

.amro-empty-notice {
  display: grid;
  place-items: center;
  gap: var(--amro-space-2);
  min-height: 132px;
  border: 1px dashed color-mix(in srgb, var(--amro-border) 52%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  text-align: center;
}

.amro-empty-notice strong {
  color: var(--amro-foreground);
}

.amro-product-surface {
  width: min(100%, 680px);
}

.amro-product-surface__content {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-product-surface__progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--amro-radius-full);
  background: color-mix(in srgb, var(--amro-border) 24%, transparent);
}

.amro-product-surface__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  transition: width var(--amro-duration-progress) var(--amro-ease-standard);
}

.amro-product-surface__items {
  display: grid;
  gap: var(--amro-space-2);
}

.amro-product-surface__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  min-height: 54px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-background) 58%, transparent);
  font: inherit;
  text-align: left;
}

.amro-product-surface__item:not(:disabled) {
  cursor: pointer;
}

.amro-product-surface__item:not(:disabled):hover,
.amro-product-surface__item:not(:disabled):focus-visible {
  border-color: var(--amro-accent-cyan);
}

.amro-product-surface__item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-product-surface__item > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-product-surface__item small,
.amro-product-surface__item em {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-style: normal;
}

.amro-product-surface__item b {
  font-family: var(--amro-font-mono);
  font-variant-numeric: tabular-nums;
}

.amro-icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  padding: 0;
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
}

.amro-icon-button:hover,
.amro-icon-button:focus-visible {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-foreground);
}

.amro-icon-button:focus-visible,
.amro-command-trigger:focus-visible,
.amro-launcher:focus-visible,
.amro-prompt-card:focus-visible,
.amro-mode-bar__option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-icon-button svg {
  width: 18px;
  height: 18px;
}

.amro-icon-button--danger {
  border-color: color-mix(in srgb, var(--amro-status-danger) 48%, transparent);
  color: var(--amro-status-danger);
}

.amro-presence-orb {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  position: relative;
}

.amro-presence-orb--sm {
  width: 38px;
  height: 38px;
}

.amro-presence-orb--lg {
  width: 86px;
  height: 86px;
}

.amro-presence-orb__core,
.amro-presence-orb__ring {
  position: absolute;
  border-radius: var(--amro-radius-full);
}

.amro-presence-orb__ring {
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--amro-border) 62%, transparent);
  transition:
    border-color var(--amro-duration-state) var(--amro-ease-standard),
    transform var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-presence-orb__core {
  display: grid;
  place-items: center;
  inset: 8px;
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-presence-orb__core svg {
  width: 52%;
  height: 52%;
}

.amro-presence-orb--listening .amro-presence-orb__core,
.amro-presence-orb--speaking .amro-presence-orb__core {
  box-shadow: var(--amro-glow-active-ai);
}

.amro-presence-orb--listening .amro-presence-orb__ring,
.amro-presence-orb--speaking .amro-presence-orb__ring {
  border-color: var(--amro-accent-cyan);
  animation: amro-presence-pulse var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}

.amro-presence-orb--thinking .amro-presence-orb__ring {
  border-color: var(--amro-accent-teal);
  border-style: dashed;
  animation: amro-presence-spin var(--amro-duration-progress) linear infinite;
}

.amro-presence-orb--error .amro-presence-orb__ring {
  border-color: var(--amro-status-danger);
}

.amro-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-2) var(--amro-space-5) var(--amro-space-2) var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
  font: inherit;
  font-weight: var(--amro-font-strong);
  cursor: pointer;
}

.amro-launcher--attention {
  box-shadow: var(--amro-glow-active-ai);
}

.amro-launcher--minimized {
  padding-right: var(--amro-space-2);
}

.amro-launcher__unread {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: var(--amro-accent-cyan);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}

.amro-assistant-header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-assistant-header__identity {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
  min-width: 0;
}

.amro-assistant-header__identity span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-mode-bar {
  display: flex;
  gap: var(--amro-space-1);
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-1);
  background: color-mix(in srgb, var(--amro-surface) 78%, transparent);
}

.amro-mode-bar__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-2);
  min-height: 38px;
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: transparent;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.amro-mode-bar__option[aria-selected="true"] {
  color: var(--amro-foreground);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-control);
}

.amro-composer {
  display: grid;
  gap: var(--amro-space-2);
  width: min(100%, 680px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-control);
}

.amro-composer:focus-within {
  border-color: var(--amro-accent-cyan);
}

.amro-composer__input {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 0;
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  line-height: var(--amro-leading-body);
}

.amro-composer__input:focus {
  outline: 0;
}

.amro-composer__toolbar,
.amro-composer__tools {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-composer__toolbar {
  justify-content: space-between;
}

.amro-command-trigger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-message {
  display: flex;
  align-items: flex-start;
  gap: var(--amro-space-3);
  max-width: min(100%, 680px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-message--human {
  justify-content: flex-end;
  margin-left: auto;
}

.amro-message__content {
  display: grid;
  gap: var(--amro-space-2);
  max-width: min(82%, 560px);
}

.amro-message__meta,
.amro-message__actions,
.amro-streaming-answer__footer,
.amro-citation__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-message__meta time,
.amro-message__delivery,
.amro-streaming-answer__footer,
.amro-citation__meta {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-message__bubble {
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  line-height: var(--amro-leading-body);
}

.amro-message--human .amro-message__bubble {
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 38%, transparent);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}

.amro-streaming-answer {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-streaming-answer__content {
  line-height: var(--amro-leading-body);
}

.amro-prompt-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--amro-space-3);
  width: 100%;
}

.amro-prompt-card {
  display: grid;
  gap: var(--amro-space-2);
  min-height: 90px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.amro-prompt-card:hover {
  border-color: var(--amro-accent-cyan);
}

.amro-prompt-card span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-citation-tray {
  width: 100%;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-citation-tray > summary {
  width: fit-content;
  color: var(--amro-accent-cyan);
  cursor: pointer;
}

.amro-citation-tray__list {
  display: grid;
  gap: var(--amro-space-2);
  margin-top: var(--amro-space-3);
}

.amro-citation {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border: 1px solid color-mix(in srgb, var(--amro-border) 38%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: color-mix(in srgb, var(--amro-background) 60%, transparent);
}

.amro-citation p {
  margin: var(--amro-space-1) 0 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-typing-stack {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-sans);
  font-size: var(--amro-text-sm);
}

.amro-typing-stack__avatars {
  display: flex;
}

.amro-typing-stack__avatars .amro-avatar + .amro-avatar {
  margin-left: calc(var(--amro-space-2) * -1);
}

.amro-typing-dots {
  color: var(--amro-accent-cyan);
  letter-spacing: 0.16em;
}

.amro-escalation-card,
.amro-action-receipt {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 680px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}

.amro-escalation-card > div,
.amro-action-receipt > div {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}

.amro-escalation-card p {
  margin: 0;
}

.amro-escalation-card small,
.amro-action-receipt span,
.amro-action-receipt time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-action-receipt > svg:first-child {
  color: var(--amro-status-success);
}

.amro-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  border-top-color: var(--amro-accent-cyan);
  border-radius: var(--amro-radius-full);
  animation: amro-presence-spin var(--amro-duration-progress) linear infinite;
}

.amro-voice-dock {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 760px);
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 34%, var(--amro-border));
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  font-family: var(--amro-font-sans);
}

.amro-waveform {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 80px;
  height: 38px;
}

.amro-waveform span {
  width: 3px;
  height: calc(8px + 28px * var(--amro-wave-level));
  border-radius: var(--amro-radius-full);
  background: linear-gradient(var(--amro-accent-teal), var(--amro-accent-cyan));
  transition: height var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-voice-dock__elapsed {
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
  font-variant-numeric: tabular-nums;
}

.amro-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  list-style: none;
}

.amro-timeline__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--amro-space-3);
  min-height: 64px;
  position: relative;
}

.amro-timeline__item::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -18px;
  left: 7px;
  width: 1px;
  background: color-mix(in srgb, var(--amro-border) 48%, transparent);
}

.amro-timeline__item:last-child::before {
  display: none;
}

.amro-timeline__marker {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 3px solid var(--amro-surface);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
  box-shadow: 0 0 0 1px var(--amro-border);
}

.amro-timeline__item > div,
.amro-timeline__item header {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-timeline__item header time,
.amro-timeline__item small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-options-popover {
  width: fit-content;
  position: relative;
}

.amro-options-popover > summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 48%, transparent);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground-muted);
  cursor: pointer;
  list-style: none;
}

.amro-options-popover__menu {
  display: grid;
  z-index: 10;
  width: 240px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-2);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  position: absolute;
  top: calc(100% + var(--amro-space-2));
  right: 0;
}

.amro-options-popover__menu button {
  display: grid;
  gap: var(--amro-space-1);
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.amro-options-popover__menu button:hover,
.amro-options-popover__menu button:focus-visible {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}

.amro-options-popover__menu span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

@keyframes amro-presence-pulse {
  50% {
    opacity: 0.42;
    transform: scale(1.12);
  }
}

@keyframes amro-presence-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .amro-feature-panel__header,
  .amro-escalation-card,
  .amro-voice-dock {
    align-items: stretch;
    flex-direction: column;
  }

.amro-message__content {
    max-width: 88%;
  }

.amro-product-surface__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

.amro-product-surface__item em {
    grid-column: 1 / -1;
  }
}

/* AmroVisionAI — generation workspaces, asset management, and production controls */
.amro-image-workbench,
.amro-prompt-brief,
.amro-prompt-diff,
.amro-variation-controls,
.amro-generation-canvas,
.amro-variant-grid,
.amro-reference-tray,
.amro-provider-strip,
.amro-style-recipe,
.amro-ratio-picker,
.amro-brand-visual,
.amro-crop-set,
.amro-asset-detail,
.amro-version-stack,
.amro-prompt-history,
.amro-favourite-collection,
.amro-asset-usage,
.amro-download-menu,
.amro-alt-generator,
.amro-credit-cost,
.amro-credit-receipt,
.amro-api-asset,
.amro-safety-explanation,
.amro-empty-gallery,
.amro-fallback-notice,
.amro-safe-overlay {
  width: min(100%, 960px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-image-workbench textarea,
.amro-guest-form textarea,
.amro-cancel-dialog textarea,
.amro-booking-details textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  line-height: var(--amro-leading-body);
}

.amro-image-workbench textarea:focus-visible,
.amro-guest-form textarea:focus-visible,
.amro-cancel-dialog textarea:focus-visible,
.amro-booking-details textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--amro-focus) 38%, transparent);
  outline-offset: 2px;
}

.amro-image-workbench .amro-feature-panel__body,
.amro-prompt-brief .amro-feature-panel__body,
.amro-alt-generator .amro-feature-panel__body,
.amro-api-asset .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}

.amro-image-workbench label,
.amro-guest-form label,
.amro-booking-details label,
.amro-cancel-dialog label {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-image-workbench label small,
.amro-guest-form label small,
.amro-booking-details label small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-weight: normal;
}

.amro-image-workbench .amro-feature-panel__body > div,
.amro-prompt-brief .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-3);
}

.amro-image-workbench footer,
.amro-prompt-brief footer,
.amro-variation-controls footer,
.amro-asset-detail footer,
.amro-alt-generator footer,
.amro-credit-cost footer,
.amro-api-asset footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-prompt-brief footer > span,
.amro-generation-canvas__loading,
.amro-fallback-notice,
.amro-safety-explanation > div,
.amro-credit-receipt > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-prompt-diff .amro-feature-panel__body > div:first-child {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--amro-space-4);
}

.amro-prompt-diff section {
  min-height: 150px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-prompt-diff ul,
.amro-prompt-history ol,
.amro-version-stack ol,
.amro-asset-usage ul,
.amro-safety-explanation ul,
.amro-download-menu ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-prompt-diff li,
.amro-safety-explanation li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-prompt-diff li svg,
.amro-safety-explanation li svg {
  color: var(--amro-status-success);
}

.amro-variation-controls .amro-feature-panel__body,
.amro-reference-tray .amro-feature-panel__body,
.amro-provider-strip .amro-feature-panel__body,
.amro-ratio-picker .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-variation-controls fieldset,
.amro-ratio-picker fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}

.amro-variation-controls label,
.amro-provider-strip button,
.amro-ratio-picker label {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  cursor: pointer;
}

.amro-generation-canvas {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-generation-canvas__stage {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 20%,
      color-mix(in srgb, var(--amro-accent-cyan) 18%, transparent),
      transparent 35%
    ),
    linear-gradient(145deg, var(--amro-surface-strong), var(--amro-canvas));
}

.amro-generation-canvas__art,
.amro-variant-grid__art,
.amro-safe-overlay__art,
.amro-crop-set__preview,
.amro-style-recipe__preview,
.amro-asset-gallery-card__preview,
.amro-asset-detail__preview,
.amro-alt-generator__asset {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--amro-accent-cyan);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--amro-accent-teal) 24%, transparent),
      transparent
    ),
    var(--amro-surface-strong);
}

.amro-generation-canvas__art {
  width: 100%;
  min-height: 420px;
}

.amro-generation-canvas__art img,
.amro-variant-grid__art img,
.amro-crop-set__preview img,
.amro-style-recipe__preview img,
.amro-asset-gallery-card__preview img,
.amro-asset-detail__preview img,
.amro-alt-generator__asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-generation-canvas__loading {
  color: var(--amro-foreground-muted);
}

.amro-generation-canvas__loading svg,
.amro-empty-gallery > svg {
  width: 36px;
  height: 36px;
  color: var(--amro-accent-cyan);
}

.amro-generation-canvas__error,
.amro-fallback-notice {
  margin: var(--amro-space-4);
  border: 1px solid color-mix(in srgb, var(--amro-status-danger) 45%, transparent);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-status-danger);
  background: color-mix(in srgb, var(--amro-status-danger) 8%, var(--amro-surface));
}

.amro-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-variant-grid > button,
.amro-style-recipe,
.amro-asset-gallery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: 0;
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--amro-duration-state) var(--amro-ease-standard),
    border-color var(--amro-duration-state) var(--amro-ease-standard);
}

.amro-variant-grid > button:hover,
.amro-style-recipe:hover,
.amro-asset-gallery-card:hover {
  transform: translateY(-2px);
  border-color: var(--amro-accent-teal);
}

.amro-variant-grid__art,
.amro-style-recipe__preview,
.amro-asset-gallery-card__preview {
  min-height: 180px;
}

.amro-variant-grid > button > span,
.amro-style-recipe > span,
.amro-asset-gallery-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3) var(--amro-space-4);
}

.amro-reference-tray > div,
.amro-provider-strip > div,
.amro-ratio-picker > div,
.amro-crop-set,
.amro-empty-gallery__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-3);
}

.amro-reference-tray__thumb,
.amro-version-stack__thumb {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  background: var(--amro-surface-strong);
}

.amro-reference-tray__thumb img,
.amro-version-stack__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amro-ratio-picker__shape {
  display: block;
  width: 32px;
  min-height: 22px;
  border: 1px solid currentColor;
  border-radius: var(--amro-radius-control-sm);
}

.amro-brand-visual__palette {
  display: flex;
  gap: var(--amro-space-2);
}

.amro-brand-visual__palette span {
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 65%, transparent);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-cyan);
}

.amro-brand-visual__palette span:nth-child(even) {
  background: var(--amro-accent-teal);
}

.amro-asset-detail__body {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 0.7fr);
  gap: var(--amro-space-5);
}

.amro-asset-detail__preview {
  min-height: 320px;
  border-radius: var(--amro-radius-control-lg);
}

.amro-version-stack li,
.amro-prompt-history li,
.amro-asset-usage li,
.amro-download-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding-block: var(--amro-space-3);
}

.amro-credit-receipt,
.amro-fallback-notice,
.amro-api-asset,
.amro-safety-explanation,
.amro-empty-gallery {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}

.amro-empty-gallery {
  display: grid;
  min-height: 300px;
  place-items: center;
  gap: var(--amro-space-3);
  text-align: center;
}

.amro-safe-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--amro-radius-card-lg);
}

.amro-safe-overlay__art {
  min-height: 360px;
}

.amro-safe-overlay [data-safe-area] {
  position: absolute;
  border: 1px dashed var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}

/* AmroMeet — instant conversations, booking, routing, and calendar operations */
.amro-instant-meet,
.amro-host-presence,
.amro-date-cell,
.amro-timezone-pill,
.amro-source-context,
.amro-conflict-indicator,
.amro-agent-handoff {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-instant-meet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  width: min(100%, 900px);
  border: 1px solid color-mix(in srgb, var(--amro-accent-teal) 45%, var(--amro-border));
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--amro-accent-teal) 9%, transparent),
      transparent
    ),
    var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-instant-meet > span:nth-child(2),
.amro-host-presence > span,
.amro-booking-summary li > span,
.amro-confirmation-card__status > span,
.amro-calendar-connection > span,
.amro-host-routing li > span,
.amro-agent-handoff > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-instant-meet small,
.amro-host-presence small,
.amro-booking-summary small,
.amro-confirmation-card small,
.amro-calendar-connection small,
.amro-host-routing small,
.amro-agent-handoff small {
  color: var(--amro-foreground-muted);
}

.amro-instant-meet > div,
.amro-live-meet-ready__delivery,
.amro-confirmation-card__status,
.amro-calendar-connection,
.amro-agent-handoff {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-instant-meet__icon {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: var(--amro-radius-control-lg);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}

.amro-instant-meet__icon i {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--amro-surface);
  border-radius: var(--amro-radius-full);
  background: var(--amro-status-success);
}

.amro-guest-form,
.amro-live-meet-ready,
.amro-talk-fallback,
.amro-event-switcher,
.amro-time-slots,
.amro-booking-steps,
.amro-booking-details,
.amro-meeting-reason,
.amro-ai-meeting-brief,
.amro-booking-summary,
.amro-delivery-status,
.amro-reschedule-panel,
.amro-cancel-dialog,
.amro-rules-editor,
.amro-buffer-control,
.amro-meeting-limit,
.amro-embed-config,
.amro-host-routing {
  width: min(100%, 880px);
}

.amro-guest-form .amro-feature-panel__body,
.amro-booking-details .amro-feature-panel__body,
.amro-cancel-dialog .amro-feature-panel__body,
.amro-embed-config .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}

.amro-guest-form .amro-feature-panel__body > div,
.amro-booking-details .amro-feature-panel__body > div,
.amro-embed-config__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-guest-form label:last-child,
.amro-booking-details label:last-child {
  grid-column: 1 / -1;
}

.amro-guest-form footer,
.amro-booking-details footer,
.amro-cancel-dialog footer,
.amro-reschedule-panel footer,
.amro-rules-editor footer,
.amro-embed-config footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}

.amro-guest-form footer > span,
.amro-booking-details__consent {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-live-meet-ready .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}

.amro-live-meet-ready__link,
.amro-confirmation-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}

.amro-live-meet-ready__link code,
.amro-confirmation-card__link code {
  overflow: hidden;
  color: var(--amro-accent-cyan);
  font-family: var(--amro-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amro-host-presence {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-2) var(--amro-space-4) var(--amro-space-2) var(--amro-space-2);
  background: var(--amro-surface);
}

.amro-host-presence--compact {
  padding-right: var(--amro-space-2);
}

.amro-event-switcher .amro-feature-panel__body,
.amro-time-slots .amro-feature-panel__body,
.amro-booking-steps .amro-feature-panel__body,
.amro-meeting-reason .amro-feature-panel__body,
.amro-rules-editor .amro-feature-panel__body,
.amro-host-routing .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}

.amro-event-switcher [role="tablist"],
.amro-time-slots [role="listbox"],
.amro-meeting-reason__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}

.amro-event-switcher [role="tab"],
.amro-time-slots [role="option"],
.amro-meeting-reason__topics button,
.amro-timezone-pill,
.amro-source-context {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 38px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding-inline: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
}

.amro-event-switcher [aria-selected="true"],
.amro-time-slots [aria-selected="true"],
.amro-meeting-reason__topics [aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
}

.amro-event-type-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--amro-space-4);
  width: min(100%, 620px);
}

.amro-event-type-card--selected {
  border-color: var(--amro-accent-teal);
  box-shadow: var(--amro-glow-active-ai);
}

.amro-event-type-card > span,
.amro-event-type-card li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}

.amro-event-type-card ul {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  list-style: none;
}

.amro-date-cell {
  position: relative;
  display: grid;
  width: 48px;
  height: 52px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-date-cell:hover:not(:disabled),
.amro-date-cell[aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}

.amro-date-cell:disabled {
  color: var(--amro-foreground-muted);
  opacity: 0.42;
  cursor: not-allowed;
}

.amro-date-cell i {
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-status-success);
}

.amro-date-cell small {
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-booking-steps ol,
.amro-booking-summary ul,
.amro-delivery-status ol,
.amro-rules-editor ul,
.amro-host-routing ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-booking-steps li,
.amro-booking-summary li,
.amro-delivery-status li,
.amro-rules-editor li,
.amro-host-routing li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-ai-meeting-brief__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-ai-meeting-brief__columns section,
.amro-reschedule-panel__current,
.amro-conflict-indicator,
.amro-buffer-control,
.amro-meeting-limit,
.amro-calendar-connection,
.amro-agent-handoff {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}

.amro-booking-summary li > svg,
.amro-confirmation-card__status > svg,
.amro-calendar-connection > svg,
.amro-agent-handoff > svg {
  color: var(--amro-accent-cyan);
}

.amro-confirmation-card {
  display: grid;
  width: min(100%, 680px);
  gap: var(--amro-space-5);
  text-align: center;
}

.amro-confirmation-card > svg {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  color: var(--amro-status-success);
}

.amro-reschedule-panel,
.amro-booking-preview {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
  font-family: var(--amro-font-sans);
}

.amro-rules-editor li {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.amro-buffer-control,
.amro-meeting-limit {
  display: grid;
  gap: var(--amro-space-3);
}

.amro-buffer-control > div,
.amro-meeting-limit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}

.amro-booking-preview {
  grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr);
  width: min(100%, 820px);
}

.amro-booking-preview--compact {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.amro-booking-preview__calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--amro-space-1);
}

.amro-booking-preview__calendar > span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: var(--amro-radius-control-sm);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  background: var(--amro-surface-muted);
}

.amro-source-context {
  color: var(--amro-accent-cyan);
}

.amro-conflict-indicator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: min(100%, 680px);
  border-color: color-mix(in srgb, var(--amro-status-warning) 45%, var(--amro-border));
}

.amro-embed-config code {
  overflow: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-strong);
  font-family: var(--amro-font-mono);
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .amro-image-workbench .amro-feature-panel__body > div,
  .amro-prompt-brief .amro-feature-panel__body > div,
  .amro-asset-detail__body,
  .amro-guest-form .amro-feature-panel__body > div,
  .amro-booking-details .amro-feature-panel__body > div,
  .amro-embed-config__controls,
  .amro-ai-meeting-brief__columns,
  .amro-booking-preview {
    grid-template-columns: 1fr;
  }

.amro-instant-meet {
    grid-template-columns: auto minmax(0, 1fr);
  }

.amro-instant-meet > .amro-status-indicator,
  .amro-instant-meet > div {
    grid-column: 1 / -1;
  }

.amro-instant-meet > div,
  .amro-image-workbench footer,
  .amro-prompt-brief footer,
  .amro-guest-form footer,
  .amro-booking-details footer,
  .amro-cancel-dialog footer,
  .amro-reschedule-panel footer,
  .amro-rules-editor footer {
    align-items: stretch;
    flex-direction: column;
  }

.amro-prompt-diff .amro-feature-panel__body > div:first-child {
    grid-template-columns: 1fr;
  }

.amro-prompt-diff .amro-feature-panel__body > div:first-child > svg {
    transform: rotate(90deg);
  }

.amro-variant-grid {
    grid-template-columns: 1fr;
  }
}

.amro-campaign-tabs,
.amro-channel-strip,
.amro-message-variants > div,
.amro-campaign-command,
.amro-campaign-command > div,
.amro-sender-identity header,
.amro-sender-identity > div,
.amro-send-window header,
.amro-send-window > div,
.amro-bulk-review .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-campaign-tabs {
  overflow-x: auto;
  border-bottom: 1px solid var(--amro-border);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-campaign-tabs button,
.amro-channel-strip button,
.amro-sequence button,
.amro-message-variants button,
.amro-personalisation-evidence button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-campaign-tabs button {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 44px;
  border-bottom: 2px solid transparent;
  padding: 0 var(--amro-space-3);
  white-space: nowrap;
}
.amro-campaign-tabs button[aria-selected="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
}
.amro-channel-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--amro-font-sans);
}
.amro-channel-strip button {
  display: grid;
  gap: var(--amro-space-2);
  min-width: 0;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-channel-strip small {
  overflow: hidden;
  color: var(--amro-foreground-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amro-message-preview .amro-feature-panel__body {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 1fr;
  gap: var(--amro-space-5);
}
.amro-message-preview aside {
  display: grid;
  align-content: start;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border-right: 1px solid var(--amro-border);
  padding-right: var(--amro-space-4);
}
.amro-message-preview aside > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-message-preview aside p {
  grid-column: 1 / -1;
  color: var(--amro-foreground-muted);
}
.amro-message-preview textarea,
.amro-retry-guidance textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font: inherit;
  line-height: var(--amro-leading-body);
}
.amro-message-preview .amro-feature-panel__body > div > small {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-sequence {
  display: grid;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
  list-style: none;
}
.amro-sequence li {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-sequence li > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-sequence li > span:first-child {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-message-variants {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-message-variants > div {
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
}
.amro-message-variants button {
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  text-transform: capitalize;
}
.amro-message-variants button[aria-checked="true"] {
  background: var(--amro-surface-muted);
}
.amro-personalisation-evidence .amro-feature-panel__body {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 0.55fr);
  gap: var(--amro-space-4);
}
.amro-personalisation-evidence .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-personalisation-evidence button {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-personalisation-evidence button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, var(--amro-surface));
}
.amro-personalisation-evidence aside {
  display: grid;
  align-content: start;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-personalisation-evidence aside span {
  display: flex;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-outreach-quality {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-outreach-quality header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-outreach-quality header > span {
  display: grid;
}
.amro-outreach-quality header strong {
  font-size: var(--amro-text-xl);
}
.amro-outreach-quality header i {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  font-style: normal;
}
.amro-outreach-quality ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-outreach-quality li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-outreach-quality meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-weak-draft {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-status-danger);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-status-danger) 7%, var(--amro-surface));
  font-family: var(--amro-font-sans);
}
.amro-weak-draft > svg {
  color: var(--amro-status-danger);
}
.amro-weak-draft ul {
  margin-bottom: 0;
  color: var(--amro-foreground-muted);
}
.amro-weak-draft > div {
  display: flex;
  align-items: center;
}
.amro-retry-guidance {
  display: grid;
  gap: var(--amro-space-3);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-retry-guidance label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-retry-guidance > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-retry-guidance small {
  color: var(--amro-foreground-muted);
}
.amro-approval-gate .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-approval-gate .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
}
.amro-approval-gate footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-bulk-review .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-bulk-review .amro-feature-panel__body > div {
  justify-content: flex-end;
}
.amro-approval-diff .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-approval-diff section {
  display: grid;
  align-content: start;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-approval-diff del {
  color: var(--amro-status-danger);
}
.amro-approval-diff ins {
  color: var(--amro-status-success);
  text-decoration: none;
}
.amro-send-window {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-send-window header {
  justify-content: space-between;
}
.amro-send-window header > span {
  display: grid;
}
.amro-send-window small {
  color: var(--amro-foreground-muted);
}
.amro-send-window__days button {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  color: inherit;
  background: transparent;
}
.amro-send-window__days button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-send-window > div:not(.amro-send-window__days) {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
}
.amro-send-window > label:last-child {
  color: var(--amro-foreground-muted);
}
.amro-campaign-progress progress,
.amro-credit-usage progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-campaign-progress ul {
  margin: var(--amro-space-3) 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
  list-style: none;
}
.amro-campaign-progress li {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-campaign-progress footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-campaign-progress footer > span {
  display: grid;
}
.amro-campaign-command {
  justify-content: space-between;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-credit-usage ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: var(--amro-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.amro-credit-usage li {
  display: flex;
  justify-content: space-between;
  color: var(--amro-foreground-muted);
}
.amro-credit-usage li strong {
  color: var(--amro-foreground);
  font-variant-numeric: tabular-nums;
}
.amro-sender-identity {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-sender-identity header > span {
  display: grid;
  flex: 1;
}
.amro-sender-identity small {
  color: var(--amro-foreground-muted);
}
.amro-autonomy {
  display: grid;
  gap: var(--amro-space-2);
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-autonomy legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-autonomy label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-autonomy label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-autonomy label > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-autonomy small {
  color: var(--amro-foreground-muted);
}
.amro-sales-audit {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-sales-audit > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
  padding: var(--amro-space-4);
}
.amro-sales-audit > header > span {
  display: grid;
}
.amro-sales-audit small {
  color: var(--amro-foreground-muted);
}
.amro-sales-audit > header label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
}
.amro-sales-audit input {
  min-height: 38px;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
}
.amro-sales-audit [role="table"] {
  display: grid;
}
.amro-sales-audit [role="row"] {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
}

/* AmroPilot editorial planning and research */
.amro-pipeline-stage-card__meta,
.amro-pipeline-stage-card footer,
.amro-keyword-brief footer,
.amro-serp-research__tabs,
.amro-keyword-cluster > header,
.amro-keyword-cluster > footer,
.amro-content-brief article > header,
.amro-outline-editor > header,
.amro-workspace-switcher button,
.amro-brand-capsule > header,
.amro-brand-capsule > div > span,
.amro-brand-capsule > div > span > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-pipeline-stage-card .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-pipeline-stage-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.amro-pipeline-stage-card__meta > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-pipeline-stage-card__meta svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-pipeline-stage-card small {
  color: var(--amro-foreground-muted);
}
.amro-pipeline-stage-card ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 8%, transparent);
  list-style: none;
}
.amro-pipeline-stage-card li {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-pipeline-stage-card footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-pipeline-stage-card footer > span {
  display: grid;
}

.amro-keyword-brief__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-4);
}
.amro-keyword-brief__grid > .amro-field:first-child,
.amro-keyword-brief__grid > .amro-search-intent {
  grid-column: 1 / -1;
}
.amro-keyword-brief footer {
  justify-content: space-between;
  margin-top: var(--amro-space-5);
}
.amro-keyword-brief footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-search-intent {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-search-intent legend {
  margin-bottom: var(--amro-space-2);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}
.amro-search-intent > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-search-intent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-search-intent label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-search-intent label > span {
  display: grid;
  gap: var(--amro-space-1);
  text-transform: capitalize;
}
.amro-search-intent small {
  color: var(--amro-foreground-muted);
  text-transform: none;
}

.amro-serp-research .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-serp-research__tabs {
  border-bottom: 1px solid var(--amro-border);
}
.amro-serp-research__tabs button,
.amro-serp-research ol button,
.amro-keyword-cluster button,
.amro-outline-editor button,
.amro-workspace-switcher button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-serp-research__tabs button {
  border-bottom: 2px solid transparent;
  padding: var(--amro-space-2) var(--amro-space-3);
  text-transform: capitalize;
}
.amro-serp-research__tabs button[aria-selected="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
}
.amro-serp-research ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-serp-research ol li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-serp-research ol li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
  font-weight: var(--amro-font-strong);
}
.amro-serp-research ol button {
  display: grid;
  gap: var(--amro-space-1);
  text-align: left;
}
.amro-serp-research small {
  color: var(--amro-foreground-muted);
}
.amro-serp-research__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-serp-research__gaps {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-serp-research__gaps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-serp-research__gaps li > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-keyword-cluster {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font-family: var(--amro-font-sans);
}
.amro-keyword-cluster > header {
  justify-content: space-between;
}
.amro-keyword-cluster > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-keyword-cluster small {
  color: var(--amro-foreground-muted);
}
.amro-keyword-cluster > div {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: var(--amro-space-2);
}
.amro-keyword-cluster button {
  display: grid;
  align-content: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-keyword-cluster button[data-kind="primary"] {
  grid-column: span 6;
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}
.amro-keyword-cluster button[data-kind="semantic"] {
  grid-column: span 3;
}
.amro-keyword-cluster button[data-kind="question"] {
  grid-column: span 4;
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 55%, var(--amro-border));
}
.amro-keyword-cluster > footer {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-keyword-cluster > footer span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-keyword-cluster i {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-keyword-cluster i[data-kind="primary"] {
  background: var(--amro-accent-teal);
}
.amro-keyword-cluster i[data-kind="question"] {
  background: var(--amro-accent-cyan);
}

.amro-content-brief .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-content-brief article {
  display: grid;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
}
.amro-content-brief article > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.amro-content-brief article > header > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-content-brief article > header label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-content-brief article > header input[type="number"] {
  width: 70px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-content-brief article > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-content-brief article > div > span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-content-brief article > div strong {
  width: 100%;
  font-size: var(--amro-text-sm);
}
.amro-content-brief textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font: inherit;
}

.amro-outline-editor {
  display: grid;
  gap: var(--amro-space-4);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-outline-editor > header {
  justify-content: space-between;
}
.amro-outline-editor > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-outline-editor small {
  color: var(--amro-foreground-muted);
}
.amro-outline-editor ol {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-outline-editor li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
}
.amro-outline-editor li[data-level="3"] {
  margin-left: var(--amro-space-6);
}
.amro-outline-editor li > svg {
  color: var(--amro-foreground-muted);
  cursor: grab;
}
.amro-outline-editor li > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-outline-editor li > div {
  display: flex;
  gap: var(--amro-space-1);
}
.amro-outline-editor li > div button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-control-sm);
}
.amro-outline-editor li > div button:hover {
  background: var(--amro-surface-muted);
}

.amro-workspace-switcher {
  position: relative;
  width: min(100%, 340px);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-workspace-switcher > button {
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface);
  text-align: left;
}
.amro-workspace-switcher button > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-workspace-switcher small {
  color: var(--amro-foreground-muted);
}
.amro-workspace-switcher__logo {
  display: grid;
  flex: 0 0 auto !important;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-workspace-switcher [role="listbox"] {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--amro-space-2));
  display: grid;
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-2);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-workspace-switcher [role="option"] {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-workspace-switcher [role="option"][aria-selected="true"] {
  background: var(--amro-surface-muted);
}

.amro-brand-capsule {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-brand-capsule > header > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-brand-capsule__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  font-weight: var(--amro-font-strong);
}
.amro-brand-capsule__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amro-brand-capsule > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-3);
  border-block: 1px solid var(--amro-border);
  padding-block: var(--amro-space-4);
}
.amro-brand-capsule > div > span {
  align-items: flex-start;
  flex-direction: column;
}
.amro-brand-capsule > div small {
  color: var(--amro-foreground-muted);
}
.amro-brand-capsule i {
  width: 18px;
  height: 18px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-teal);
}
.amro-brand-capsule i[data-color="accent-cyan"] {
  background: var(--amro-accent-cyan);
}
.amro-brand-capsule i[data-color="surface-strong"] {
  background: var(--amro-surface-strong);
}

.amro-brand-voice ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-brand-voice li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-brand-voice li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-brand-voice li small {
  color: var(--amro-foreground-muted);
}
.amro-brand-voice meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}

@media (max-width: 700px) {
  .amro-keyword-brief__grid,
  .amro-search-intent > div,
  .amro-content-brief article > div,
  .amro-brand-capsule > div {
    grid-template-columns: 1fr;
  }
  .amro-keyword-brief__grid > .amro-field,
  .amro-keyword-brief__grid > .amro-search-intent {
    grid-column: auto;
  }
  .amro-keyword-brief footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-keyword-cluster button[data-kind] {
    grid-column: span 12;
  }
  .amro-outline-editor li[data-level="3"] {
    margin-left: var(--amro-space-3);
  }
}

/* AmroPilot editor, quality, review, and export */
.amro-article-workspace,
.amro-section-control,
.amro-inline-ai-menu,
.amro-citation-inspector,
.amro-trust-warning,
.amro-issue-navigator,
.amro-ai-image-slot,
.amro-internal-link,
.amro-metadata-preview,
.amro-version-timeline,
.amro-review-mode,
.amro-export-tray,
.amro-branded-preview,
.amro-webhook-tester,
.amro-article-status {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-article-workspace {
  display: grid;
  grid-template-columns: 230px minmax(320px, 1fr) 240px;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
}
.amro-article-workspace > aside:first-child {
  border-right: 1px solid var(--amro-border);
}
.amro-article-workspace > aside:last-child {
  border-left: 1px solid var(--amro-border);
}
.amro-article-workspace aside header,
.amro-article-workspace main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
  min-height: 58px;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-article-workspace nav {
  display: grid;
  padding: var(--amro-space-2);
}
.amro-article-workspace nav button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-article-workspace nav button[aria-current="true"] {
  background: var(--amro-surface-muted);
}
.amro-article-workspace nav button > span:first-child {
  color: var(--amro-accent-cyan);
}
.amro-article-workspace nav button > span:last-child,
.amro-article-workspace main header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-article-workspace small {
  color: var(--amro-foreground-muted);
}
.amro-article-workspace main article {
  padding: var(--amro-space-6);
}
.amro-article-workspace main textarea {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  border: 0;
  outline: 0;
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
  line-height: 1.8;
}
.amro-article-workspace aside ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  padding: var(--amro-space-3);
  list-style: none;
}
.amro-article-workspace aside li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
}
.amro-article-workspace aside li meter {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-section-control {
  display: grid;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-section-control header,
.amro-section-control footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
}
.amro-section-control header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-section-control small {
  color: var(--amro-foreground-muted);
}
.amro-section-control label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-section-control input {
  min-height: 42px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-inline-ai-menu {
  width: min(320px, 90vw);
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-inline-ai-menu header {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-2);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-inline-ai-menu header > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
}
.amro-inline-ai-menu header svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-inline-ai-menu small {
  color: var(--amro-foreground-muted);
}
.amro-inline-ai-menu button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.amro-inline-ai-menu > div {
  display: grid;
  padding: var(--amro-space-2);
}
.amro-inline-ai-menu [role="menuitem"] {
  display: flex;
  justify-content: space-between;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-inline-ai-menu [role="menuitem"]:hover {
  background: var(--amro-surface-muted);
}
.amro-claim-verification blockquote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  margin: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-claim-verification blockquote svg {
  color: var(--amro-accent-cyan);
}
.amro-claim-verification blockquote p {
  margin: 0;
}
.amro-claim-verification cite {
  grid-column: 2;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-claim-verification .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--amro-space-2);
  margin-top: var(--amro-space-3);
}
.amro-citation-inspector {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-citation-inspector header,
.amro-citation-inspector footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-2);
}
.amro-citation-inspector header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-citation-inspector small,
.amro-citation-inspector dt {
  color: var(--amro-foreground-muted);
}
.amro-citation-inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.amro-citation-inspector dl > div {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-citation-inspector dd {
  margin: 0;
}
.amro-citation-inspector blockquote {
  margin: 0;
  border-left: 3px solid var(--amro-accent-cyan);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-trust-warning {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-status-danger);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-status-danger) 7%, var(--amro-surface));
}
.amro-trust-warning > svg {
  color: var(--amro-status-danger);
}
.amro-trust-warning > span {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-trust-warning blockquote {
  margin: 0;
  border-left: 2px solid var(--amro-status-danger);
  padding-left: var(--amro-space-3);
}
.amro-trust-warning small {
  color: var(--amro-foreground-muted);
}
.amro-trust-warning > div {
  display: flex;
  align-items: center;
}
.amro-content-quality ul {
  display: grid;
  gap: var(--amro-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-content-quality li button {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 1.6fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-content-quality li button:hover {
  background: var(--amro-surface-muted);
}
.amro-content-quality li span {
  display: grid;
}
.amro-content-quality li small {
  color: var(--amro-foreground-muted);
}
.amro-content-quality meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-issue-navigator {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-issue-navigator > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-issue-navigator > header > span {
  display: grid;
}
.amro-issue-navigator small {
  color: var(--amro-foreground-muted);
}
.amro-issue-navigator ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-issue-navigator li {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--amro-border);
}
.amro-issue-navigator li > button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.amro-issue-navigator li > button:first-child {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-issue-navigator li[data-active="true"] {
  background: var(--amro-surface-muted);
}
.amro-issue-navigator li > button:first-child > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}
.amro-issue-navigator li > button:first-child > span:nth-child(2) {
  display: grid;
}
.amro-issue-navigator li > button:last-child {
  padding: var(--amro-space-3);
  color: var(--amro-status-success);
}
.amro-ai-image-slot {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-ai-image-slot__preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--amro-radius-control-lg);
  background: var(--amro-surface-muted);
}
.amro-ai-image-slot__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amro-ai-image-slot__preview > span:not(.amro-status-indicator) {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-ai-image-slot__preview .amro-status-indicator {
  position: absolute;
  top: var(--amro-space-3);
  right: var(--amro-space-3);
}
.amro-ai-image-slot > label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-ai-image-slot textarea {
  min-height: 80px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
  font: inherit;
}
.amro-ai-image-slot > div:not(.amro-ai-image-slot__preview) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-ai-image-slot footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-figure-quality .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-figure-quality ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-figure-quality li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-figure-quality li > span {
  display: grid;
}
.amro-figure-quality li > svg {
  color: var(--amro-status-danger);
}
.amro-figure-quality li[data-pass="true"] > svg {
  color: var(--amro-status-success);
}
.amro-figure-quality small {
  color: var(--amro-foreground-muted);
}
.amro-internal-link {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-internal-link header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
}
.amro-internal-link header > svg {
  color: var(--amro-accent-cyan);
}
.amro-internal-link header > span {
  display: grid;
}
.amro-internal-link small,
.amro-internal-link p {
  color: var(--amro-foreground-muted);
}
.amro-internal-link > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-internal-link footer {
  display: flex;
  justify-content: flex-end;
}
.amro-metadata-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-5);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-metadata-preview section > div {
  margin-top: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-background);
}
.amro-metadata-preview section strong {
  display: block;
  margin: var(--amro-space-2) 0;
  color: var(--amro-accent-cyan);
  font-size: var(--amro-text-lg);
}
.amro-metadata-preview section p,
.amro-metadata-preview small {
  color: var(--amro-foreground-muted);
}
.amro-metadata-preview form {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-metadata-preview form > label:not(.amro-field) {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-metadata-preview textarea {
  min-height: 86px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
  font: inherit;
}
.amro-metadata-preview form > small {
  justify-self: end;
}
.amro-version-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-version-timeline li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 66px;
}
.amro-version-timeline li > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-version-timeline li > span:nth-child(2) {
  display: grid;
}
.amro-version-timeline small {
  color: var(--amro-foreground-muted);
}
.amro-version-timeline li > div {
  display: flex;
}
.amro-review-mode {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-review-mode > header {
  display: flex;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-review-mode > header > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-review-mode ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-review-mode li {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-review-mode li[data-active="true"] {
  background: var(--amro-surface-muted);
}
.amro-review-mode li > button {
  display: grid;
  gap: var(--amro-space-2);
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-review-mode li > button > span {
  display: flex;
  justify-content: space-between;
}
.amro-review-mode blockquote {
  margin: 0;
  border-left: 2px solid var(--amro-accent-cyan);
  padding-left: var(--amro-space-3);
  color: var(--amro-foreground-muted);
}
.amro-review-mode li footer {
  display: flex;
  justify-content: flex-end;
}
.amro-review-mode > form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-review-mode > form input {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-export-tray {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-export-tray > header {
  display: flex;
  justify-content: space-between;
}
.amro-export-tray > header > span {
  display: grid;
}
.amro-export-tray small {
  color: var(--amro-foreground-muted);
}
.amro-export-tray > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-export-tray button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-surface);
  text-align: left;
}
.amro-export-tray button > span:first-child {
  color: var(--amro-accent-cyan);
}
.amro-export-tray button > span:nth-child(2) {
  display: grid;
}
.amro-export-tray button:disabled {
  opacity: 0.45;
}
.amro-branded-preview {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-branded-preview > header,
.amro-branded-preview > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amro-branded-preview > header > span:first-child {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-branded-preview > article {
  width: min(100%, 680px);
  min-height: 760px;
  margin-inline: auto;
  border: 1px solid var(--amro-border);
  padding: var(--amro-space-6);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-card);
}
.amro-branded-preview__brand {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-branded-preview__brand > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-branded-preview h1 {
  margin-top: var(--amro-space-6);
  font-size: var(--amro-text-xl);
}
.amro-branded-preview__byline,
.amro-branded-preview article p {
  color: var(--amro-foreground-muted);
  line-height: var(--amro-leading-body);
}
.amro-branded-preview article footer {
  margin-top: var(--amro-space-6);
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
  color: var(--amro-foreground-muted);
}
.amro-webhook-tester {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-webhook-tester > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amro-webhook-tester > header > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-webhook-tester > header > span > span {
  display: grid;
}
.amro-webhook-tester small {
  color: var(--amro-foreground-muted);
}
.amro-webhook-tester > label {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-webhook-tester textarea {
  min-height: 140px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-background);
  font-family: var(--amro-font-mono);
}
.amro-webhook-tester > div {
  display: grid;
  gap: var(--amro-space-2);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-webhook-tester > div[data-state="success"] strong {
  color: var(--amro-status-success);
}
.amro-webhook-tester > div[data-state="error"] strong {
  color: var(--amro-status-danger);
}
.amro-webhook-tester footer {
  display: flex;
  justify-content: flex-end;
}
.amro-credit-forecast ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-credit-forecast li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-2) 0;
}
.amro-credit-forecast li > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-credit-forecast li small {
  color: var(--amro-foreground-muted);
}
.amro-credit-forecast footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--amro-space-4);
}
.amro-credit-forecast footer > span {
  display: grid;
  color: var(--amro-foreground-muted);
}
.amro-article-status {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-article-status header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-article-status header > span:first-child {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-article-status header > span:nth-child(2) {
  display: grid;
}
.amro-article-status small {
  color: var(--amro-foreground-muted);
}
.amro-article-status > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-article-status progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-article-status footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-article-status footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
@media (max-width: 820px) {
  .amro-article-workspace {
    grid-template-columns: 190px 1fr;
  }
  .amro-article-workspace > aside:last-child {
    display: none;
  }
  .amro-export-tray > div {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .amro-article-workspace {
    grid-template-columns: 1fr;
  }
  .amro-article-workspace > aside:first-child {
    display: none;
  }
  .amro-metadata-preview,
  .amro-ai-image-slot > div:not(.amro-ai-image-slot__preview),
  .amro-figure-quality ul {
    grid-template-columns: 1fr;
  }
  .amro-export-tray > div {
    grid-template-columns: 1fr;
  }
  .amro-trust-warning {
    grid-template-columns: auto 1fr;
  }
  .amro-trust-warning > div {
    grid-column: 1 / -1;
  }
  .amro-branded-preview > article {
    min-height: 540px;
    padding: var(--amro-space-4);
  }
}

/* AmroAcademy learning system */
.amro-voice-tutor-orb,
.amro-voice-lesson,
.amro-synced-transcript,
.amro-tutor-conversation,
.amro-understanding-check,
.amro-confidence-selector,
.amro-skill-radar,
.amro-learning-streak,
.amro-badge-toast,
.amro-hands-free,
.amro-learning-context,
.amro-learning-goal,
.amro-allocation-table,
.amro-learning-heatmap,
.amro-role-badge {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-voice-tutor-orb {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-5);
  text-align: center;
}
.amro-voice-tutor-orb > div {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  border-radius: var(--amro-radius-full);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--amro-accent-cyan) 20%, var(--amro-surface)) 0 38%,
    var(--amro-surface) 40%
  );
  box-shadow: var(--amro-glow-active-ai);
}
.amro-voice-tutor-orb > div > span {
  position: absolute;
  inset: calc(var(--amro-space-2) * -1);
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 32%, transparent);
  border-radius: var(--amro-radius-full);
  animation: amro-voice-ring var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}
.amro-voice-tutor-orb > div > span:nth-child(2) {
  animation-delay: calc(var(--amro-duration-pulse) / -3);
}
.amro-voice-tutor-orb > div > span:nth-child(3) {
  animation-delay: calc(var(--amro-duration-pulse) / -1.5);
}
.amro-voice-tutor-orb svg {
  width: 34px;
  height: 34px;
  color: var(--amro-accent-cyan);
}
.amro-voice-tutor-orb small {
  color: var(--amro-foreground-muted);
}
.amro-voice-tutor-orb--paused > div,
.amro-voice-tutor-orb--idle > div {
  box-shadow: none;
}
.amro-voice-tutor-orb--paused > div > span,
.amro-voice-tutor-orb--idle > div > span,
.amro-voice-tutor-orb--error > div > span {
  animation: none;
}
.amro-voice-tutor-orb--error svg {
  color: var(--amro-status-danger);
}
.amro-voice-lesson {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-voice-lesson header,
.amro-voice-lesson footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-voice-lesson header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-voice-lesson small {
  color: var(--amro-foreground-muted);
}
.amro-voice-lesson__transport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-voice-lesson__transport > button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-voice-lesson__transport > span {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-voice-lesson__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 54px;
}
.amro-voice-lesson__wave i {
  flex: 1;
  min-width: 2px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-voice-lesson__wave i[data-played="true"] {
  background: var(--amro-accent-cyan);
}
.amro-voice-lesson > input {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-voice-lesson footer button,
.amro-voice-lesson footer label {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-voice-lesson footer select {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-synced-transcript {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-synced-transcript > header {
  display: flex;
  justify-content: space-between;
  padding: var(--amro-space-4);
}
.amro-synced-transcript > header > span {
  display: grid;
}
.amro-synced-transcript small {
  color: var(--amro-foreground-muted);
}
.amro-synced-transcript ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-synced-transcript li button {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  line-height: var(--amro-leading-body);
}
.amro-synced-transcript li[data-active="true"] button {
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-synced-transcript time {
  color: var(--amro-foreground-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-synced-transcript li button > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-synced-transcript mark {
  color: inherit;
  background: transparent;
}
.amro-synced-transcript mark[data-active="true"] {
  color: var(--amro-on-accent);
  background: var(--amro-accent-teal);
}
.amro-ask-tutor {
  min-height: 50px;
}
.amro-ask-tutor__pulse {
  width: 9px;
  height: 9px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  animation: amro-shared-pulse var(--amro-duration-pulse) infinite;
}
.amro-tutor-conversation {
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
}
.amro-tutor-conversation > header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-tutor-conversation > header > span:nth-child(2) {
  display: grid;
  flex: 1;
}
.amro-tutor-conversation small {
  color: var(--amro-foreground-muted);
}
.amro-tutor-conversation > header > button,
.amro-tutor-conversation form > button {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-tutor-conversation [role="log"] {
  display: grid;
  align-content: start;
  gap: var(--amro-space-3);
  overflow: auto;
  padding: var(--amro-space-4);
}
.amro-tutor-conversation article {
  max-width: 82%;
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-tutor-conversation article[data-role="learner"] {
  justify-self: end;
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}
.amro-tutor-conversation article p {
  margin: var(--amro-space-1) 0 0;
}
.amro-tutor-conversation form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--amro-space-2);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
}
.amro-tutor-conversation form input {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: 0 var(--amro-space-3);
  color: inherit;
  background: var(--amro-background);
}
.amro-tutor-response .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-tutor-response [role="tablist"] {
  display: flex;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
}
.amro-tutor-response [role="tab"] {
  flex: 1;
  border: 0;
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: transparent;
  text-transform: capitalize;
}
.amro-tutor-response [role="tab"][aria-selected="true"] {
  background: var(--amro-surface-muted);
}
.amro-tutor-response footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--amro-space-2);
}
.amro-understanding-check {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-understanding-check > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-understanding-check button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: inherit;
  background: var(--amro-surface);
  text-align: left;
}
.amro-understanding-check button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 9%, var(--amro-surface));
}
.amro-understanding-check button > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-understanding-check button > span:last-child {
  display: grid;
}
.amro-understanding-check small {
  color: var(--amro-foreground-muted);
}
.amro-knowledge-check .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-knowledge-check [role="radiogroup"] {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-knowledge-check [role="radio"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
}
.amro-knowledge-check [role="radio"] > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-knowledge-check [role="radio"][data-result="correct"] {
  border-color: var(--amro-status-success);
}
.amro-knowledge-check [role="radio"][data-result="incorrect"] {
  border-color: var(--amro-status-danger);
}
.amro-knowledge-check__explanation {
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  background: var(--amro-surface-muted);
}
.amro-knowledge-check__explanation p {
  margin-bottom: 0;
  color: var(--amro-foreground-muted);
}
.amro-confidence-selector {
  margin: 0;
  border: 0;
  padding: 0;
}
.amro-confidence-selector legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-confidence-selector > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--amro-space-2);
}
.amro-confidence-selector label {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-confidence-selector label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 9%, transparent);
}
.amro-confidence-selector input {
  position: absolute;
  opacity: 0;
}
.amro-confidence-selector label > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
  font-weight: var(--amro-font-strong);
}
.amro-confidence-selector small {
  color: var(--amro-foreground-muted);
  text-align: center;
}
.amro-learning-companion,
.amro-programme-card .amro-feature-panel__body,
.amro-journey-resume,
.amro-offline-lesson {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-companion header,
.amro-learning-companion footer,
.amro-journey-resume header,
.amro-journey-resume footer,
.amro-offline-lesson header,
.amro-offline-lesson footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-learning-companion header > span:nth-child(2),
.amro-journey-resume header > span,
.amro-journey-resume footer > span,
.amro-offline-lesson header > span:nth-child(2) {
  display: grid;
  flex: 1;
}
.amro-learning-companion small,
.amro-programme-card small,
.amro-journey-resume small,
.amro-offline-lesson small {
  color: var(--amro-foreground-muted);
}
.amro-learning-companion > div {
  display: flex;
  gap: var(--amro-space-4);
  color: var(--amro-foreground-muted);
}
.amro-learning-companion > div span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-learning-companion progress,
.amro-journey-resume progress,
.amro-offline-lesson progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-learning-companion footer {
  justify-content: space-between;
}
.amro-learning-companion footer > span {
  display: grid;
}
.amro-programme-card__instructor {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-programme-card__instructor > span {
  display: grid;
}
.amro-programme-card ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-programme-card li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-programme-card li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-programme-card footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-programme-card footer > span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-programme-card footer > span > small {
  width: 100%;
}
.amro-course-composer .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-course-composer .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-course-composer .amro-feature-panel__body > div > .amro-field:nth-child(1),
.amro-course-composer .amro-feature-panel__body > div > .amro-field:nth-child(3) {
  grid-column: 1 / -1;
}
.amro-course-composer footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-course-composer footer .amro-button {
  margin-left: auto;
}
.amro-course-composer footer label {
  display: flex;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-journey-resume header {
  justify-content: space-between;
}
.amro-journey-resume > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-journey-resume__thumb {
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  border-radius: var(--amro-radius-control-lg);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-journey-resume > div > span:last-child {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-journey-resume footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-learning-map {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-learning-map li button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: transparent;
  text-align: left;
}
.amro-learning-map li[data-status="active"] button {
  background: color-mix(in srgb, var(--amro-accent-cyan) 7%, transparent);
}
.amro-learning-map li button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-learning-map li button > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-learning-map small {
  color: var(--amro-foreground-muted);
}
.amro-learning-map progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-mastery-ring {
  display: flex;
  align-items: center;
  gap: var(--amro-space-5);
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}
.amro-mastery-ring > div {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: var(--amro-radius-full);
  background:
    radial-gradient(circle, var(--amro-surface) 55%, transparent 57%),
    conic-gradient(var(--amro-accent-teal) var(--amro-mastery), var(--amro-surface-muted) 0);
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--amro-accent-cyan) 20%, transparent);
}
.amro-mastery-ring > div > span {
  display: grid;
  justify-items: center;
}
.amro-mastery-ring > div strong {
  font-size: var(--amro-text-xl);
}
.amro-mastery-ring > span {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-mastery-ring small {
  color: var(--amro-foreground-muted);
}
.amro-mastery-ring > span > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-mastery-ring i {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-accent-teal);
}
.amro-mastery-ring i[data-kind="completion"] {
  background: var(--amro-accent-cyan);
}
.amro-skill-radar {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-skill-radar > header,
.amro-learning-streak header,
.amro-learning-streak > div,
.amro-certificate-card footer,
.amro-language-switcher label,
.amro-offline-lesson > div,
.amro-learning-goal header,
.amro-learning-goal footer,
.amro-allocation-table > header,
.amro-learning-heatmap > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-skill-radar > header > span,
.amro-learning-streak header > span:nth-child(2),
.amro-learning-goal header > span,
.amro-allocation-table > header > span,
.amro-learning-heatmap > header > span {
  display: grid;
}
.amro-skill-radar small,
.amro-learning-streak small,
.amro-language-switcher small,
.amro-learning-goal small,
.amro-allocation-table small,
.amro-learning-heatmap small {
  color: var(--amro-foreground-muted);
}
.amro-skill-radar > div {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1fr;
  gap: var(--amro-space-5);
}
.amro-skill-radar svg {
  width: 100%;
  max-height: 260px;
}
.amro-skill-radar__grid {
  fill: var(--amro-surface-muted);
  stroke: var(--amro-border);
}
.amro-skill-radar__shape {
  fill: color-mix(in srgb, var(--amro-accent-cyan) 24%, transparent);
  stroke: var(--amro-accent-cyan);
  stroke-width: 2;
}
.amro-skill-radar ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-skill-radar li button {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--amro-space-3);
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  color: inherit;
  background: transparent;
  text-align: left;
}
.amro-skill-radar li button:hover {
  background: var(--amro-surface-muted);
}
.amro-adaptive-path .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-adaptive-path .amro-feature-panel__body button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  text-align: left;
}
.amro-adaptive-path .amro-feature-panel__body button[data-recommended="true"] {
  border-color: var(--amro-accent-cyan);
}
.amro-adaptive-path button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-adaptive-path button > span:nth-child(2) {
  display: grid;
}
.amro-adaptive-path button .amro-badge {
  grid-column: 1 / -1;
}
.amro-adaptive-path small {
  color: var(--amro-foreground-muted);
}
.amro-learning-streak {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-streak header > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-warning);
  background: color-mix(in srgb, var(--amro-status-warning) 10%, transparent);
}
.amro-learning-streak header > span:nth-child(2) {
  flex: 1;
}
.amro-learning-streak > div span {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-1);
}
.amro-learning-streak > div i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-surface-muted);
}
.amro-learning-streak > div span[data-active="true"] i {
  color: var(--amro-on-accent);
  background: var(--amro-accent-teal);
}
.amro-badge-toast {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  max-width: 560px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-cyan) 45%, var(--amro-border));
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-badge-toast > span:first-child {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-badge-toast > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-badge-toast small {
  color: var(--amro-foreground-muted);
}
.amro-badge-toast > button:last-child {
  border: 0;
  color: inherit;
  background: transparent;
}
.amro-certificate-card {
  overflow: hidden;
  padding: 0;
}
.amro-certificate-card__preview {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-6);
  text-align: center;
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--amro-accent-cyan) 14%, transparent),
    transparent 54%
  );
}
.amro-certificate-card__preview > span:first-child {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--amro-accent-cyan);
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
}
.amro-certificate-card__preview h3 {
  margin: var(--amro-space-2) 0;
  font-size: var(--amro-text-xl);
}
.amro-certificate-card__preview p {
  margin: 0;
}
.amro-certificate-card__preview small {
  color: var(--amro-foreground-muted);
}
.amro-certificate-card footer {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
}
.amro-certificate-card footer > div {
  display: flex;
}
.amro-language-switcher .amro-feature-panel__body > div {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-language-switcher label {
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-language-switcher label > span {
  display: grid;
}
.amro-language-switcher select {
  min-width: 140px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-2);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-hands-free {
  display: grid;
  gap: var(--amro-space-5);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-hands-free header {
  display: flex;
  justify-content: space-between;
}
.amro-hands-free header > span {
  display: grid;
}
.amro-hands-free small {
  color: var(--amro-foreground-muted);
}
.amro-hands-free > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-3);
}
.amro-hands-free > div button {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-2);
  min-height: 110px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-hands-free > div button:nth-child(2),
.amro-hands-free > div button[data-active="true"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-glow-active-ai);
}
.amro-hands-free > div svg {
  width: 30px;
  height: 30px;
}
.amro-learning-context {
  margin: 0;
  border: 0;
  padding: 0;
}
.amro-learning-context legend {
  margin-bottom: var(--amro-space-3);
  font-weight: var(--amro-font-strong);
}
.amro-learning-context > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-2);
}
.amro-learning-context label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
}
.amro-learning-context label[data-selected="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 8%, transparent);
}
.amro-learning-context input {
  position: absolute;
  opacity: 0;
}
.amro-learning-context label > span:nth-child(2) {
  color: var(--amro-accent-cyan);
}
.amro-learning-context label > span:last-child {
  display: grid;
}
.amro-learning-context small {
  color: var(--amro-foreground-muted);
}
.amro-offline-lesson header > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-offline-lesson > div {
  display: grid;
  grid-template-columns: 1fr auto;
}
.amro-offline-lesson footer {
  justify-content: space-between;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}
.amro-offline-lesson footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-tutor-memory .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-tutor-memory ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-tutor-memory li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) 0;
}
.amro-tutor-memory li > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: var(--amro-surface-muted);
}
.amro-tutor-memory li > span:nth-child(2) {
  display: grid;
}
.amro-tutor-memory small {
  color: var(--amro-foreground-muted);
}
.amro-tutor-memory li button {
  border: 0;
  color: var(--amro-foreground-muted);
  background: transparent;
}
.amro-learning-goal {
  display: grid;
  gap: var(--amro-space-4);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-5);
  background: var(--amro-surface);
}
.amro-learning-goal header {
  justify-content: flex-start;
}
.amro-learning-goal header > svg {
  color: var(--amro-accent-cyan);
}
.amro-learning-goal > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-learning-goal footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
}
.amro-allocation-table {
  overflow-x: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-allocation-table > header {
  padding: var(--amro-space-4);
}
.amro-allocation-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.amro-allocation-table th,
.amro-allocation-table td {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3);
  white-space: nowrap;
}
.amro-allocation-table th {
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-allocation-table td:first-child {
  display: grid;
}
.amro-allocation-table progress {
  width: 80px;
  accent-color: var(--amro-accent-teal);
}
.amro-learning-heatmap {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-learning-heatmap__grid {
  display: grid;
  gap: var(--amro-space-2);
  align-items: stretch;
  overflow-x: auto;
}
.amro-learning-heatmap__grid > strong {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: var(--amro-text-sm);
}
.amro-learning-heatmap__grid > button {
  display: grid;
  place-items: center;
  min-height: 70px;
  border: 1px solid color-mix(in srgb, var(--amro-accent-teal) 48%, var(--amro-border));
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
}
.amro-learning-heatmap__grid > button small {
  font-size: var(--amro-text-xs);
}
.amro-credit-pool .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--amro-space-3);
}
.amro-credit-pool section {
  display: grid;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-credit-pool section > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-1) var(--amro-space-2);
}
.amro-credit-pool section svg {
  grid-row: 1 / 3;
  color: var(--amro-accent-cyan);
}
.amro-credit-pool small {
  color: var(--amro-foreground-muted);
}
.amro-credit-pool progress {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-role-badge--instructor {
  color: var(--amro-accent-cyan);
}
.amro-role-badge--organisation-admin,
.amro-role-badge--platform-admin {
  color: var(--amro-status-warning);
}
@keyframes amro-voice-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(calc(1 + var(--amro-wave-level) * 0.18));
  }
}
@media (max-width: 700px) {
  .amro-understanding-check > div,
  .amro-adaptive-path .amro-feature-panel__body > div,
  .amro-skill-radar > div,
  .amro-credit-pool .amro-feature-panel__body > div {
    grid-template-columns: 1fr;
  }
  .amro-confidence-selector > div {
    grid-template-columns: repeat(2, 1fr);
  }
  .amro-course-composer .amro-feature-panel__body > div,
  .amro-learning-goal > div {
    grid-template-columns: 1fr;
  }
  .amro-course-composer .amro-feature-panel__body > div > .amro-field {
    grid-column: auto;
  }
  .amro-course-composer footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-course-composer footer .amro-button {
    margin-left: 0;
  }
  .amro-hands-free > div,
  .amro-learning-context > div {
    grid-template-columns: 1fr 1fr;
  }
  .amro-badge-toast {
    grid-template-columns: auto 1fr;
  }
  .amro-badge-toast .amro-button,
  .amro-badge-toast > button:last-child {
    grid-column: 1 / -1;
  }
  .amro-learning-heatmap > header {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amro-voice-tutor-orb > div > span,
  .amro-ask-tutor__pulse {
    animation: none;
  }
}

@keyframes amro-skeleton-progress {
  to {
    transform: translateX(100%);
  }
}

.amro-issue-composer,
.amro-agent-activity,
.amro-live-outcome,
.amro-human-loop {
  width: min(100%, 720px);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}

.amro-issue-composer {
  display: grid;
  gap: var(--amro-space-5);
  padding: var(--amro-space-5);
}

.amro-issue-composer > header,
.amro-agent-activity > header,
.amro-issue-composer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-4);
}

.amro-issue-composer > header > div,
.amro-agent-activity > header > span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}

.amro-issue-composer label,
.amro-issue-composer fieldset {
  display: grid;
  gap: var(--amro-space-2);
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--amro-foreground);
  font-size: var(--amro-text-sm);
  font-weight: var(--amro-font-medium);
}

.amro-issue-composer select,
.amro-issue-composer textarea {
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  font-weight: var(--amro-font-body);
  resize: vertical;
}

.amro-segmented-field {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-1);
  background: var(--amro-surface-muted);
}

.amro-segmented-field button {
  border: 0;
  border-radius: calc(var(--amro-radius-control) - 2px);
  padding: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
  text-transform: capitalize;
}

.amro-segmented-field button[aria-pressed="true"] {
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
  box-shadow: inset 0 0 0 1px var(--amro-accent-cyan);
}

.amro-attachment-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-3);
}

.amro-attachment-row > button,
.amro-check-row {
  display: flex !important;
  align-items: center;
  gap: var(--amro-space-3) !important;
  border: 1px dashed var(--amro-border) !important;
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) !important;
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.amro-attachment-row svg {
  flex: 0 0 auto;
  width: 20px;
  color: var(--amro-accent-cyan);
}

.amro-attachment-row span,
.amro-check-row span {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-attachment-row small,
.amro-check-row small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-body);
}

.amro-check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--amro-accent-teal);
}

.amro-issue-composer > footer > span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-issue-composer > footer svg {
  width: 15px;
}

.amro-powered-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--amro-space-3);
  width: 100%;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-powered-footer a,
.amro-powered-footer button {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.amro-powered-footer svg {
  width: 13px;
  color: var(--amro-accent-cyan);
}

.amro-agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
}

.amro-agent-row__copy,
.amro-agent-row__copy > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-width: 0;
}

.amro-agent-row__copy {
  align-items: stretch;
  flex-direction: column;
  gap: var(--amro-space-1);
}

.amro-agent-row__copy > span:nth-child(2),
.amro-agent-row__copy small {
  overflow: hidden;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amro-agent-row__progress {
  overflow: hidden;
  height: 3px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}

.amro-agent-row__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}

.amro-agent-row > button {
  border: 0;
  color: var(--amro-accent-cyan);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
}

.amro-agent-team {
  width: min(100%, 720px);
}
.amro-agent-team__list {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-agent-outcomes {
  width: min(100%, 720px);
}

.amro-live-outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  padding: var(--amro-space-4);
}

.amro-live-outcome__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 14%, transparent);
}

.amro-live-outcome > span:nth-child(2),
.amro-live-outcome > span:nth-child(3) {
  display: grid;
  gap: var(--amro-space-1);
}

.amro-live-outcome > span:nth-child(2) small,
.amro-live-outcome time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-agent-activity {
  overflow: hidden;
}
.amro-agent-activity > header {
  padding: var(--amro-space-4);
  border-bottom: 1px solid var(--amro-border);
}
.amro-agent-activity ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amro-agent-activity li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-3) var(--amro-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--amro-border) 60%, transparent);
}
.amro-agent-activity li:last-child {
  border-bottom: 0;
}
.amro-agent-activity__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-agent-activity__icon svg {
  width: 16px;
}
.amro-agent-activity li > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-agent-activity li small,
.amro-agent-activity time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-agent-activity li > button {
  border: 0;
  color: var(--amro-accent-cyan);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--amro-text-xs);
}

.amro-control-boundary {
  width: min(100%, 760px);
}
.amro-control-boundary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-3);
}
.amro-control-boundary article {
  display: grid;
  align-content: start;
  gap: var(--amro-space-2);
  min-height: 180px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-control-boundary article > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-control-boundary article > span:first-child svg {
  width: 19px;
}
.amro-control-boundary article small {
  min-height: 36px;
  color: var(--amro-foreground-muted);
}

.amro-trusted-knowledge {
  width: min(100%, 760px);
}
.amro-trusted-knowledge__list {
  display: grid;
  gap: var(--amro-space-2);
}
.amro-trusted-knowledge__list > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  width: 100%;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
  font: inherit;
  text-align: left;
}
.amro-trusted-knowledge__list > button:not(:disabled) {
  cursor: pointer;
}
.amro-trusted-knowledge__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 10%, transparent);
}
.amro-trusted-knowledge__icon svg {
  width: 17px;
}
.amro-trusted-knowledge__list > button > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-trusted-knowledge__list small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-human-loop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--amro-space-4);
  border-color: color-mix(in srgb, var(--amro-accent-cyan) 42%, var(--amro-border));
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-accent-cyan) 5%, var(--amro-surface));
}

.amro-human-loop__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, transparent);
}
.amro-human-loop > span:nth-child(2),
.amro-human-loop > span:nth-child(3) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-human-loop small,
.amro-human-loop > span:nth-child(3) > span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-human-loop > span:nth-child(3) > span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
}
.amro-human-loop > span:nth-child(3) svg {
  width: 13px;
}
.amro-human-loop--compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--amro-space-3);
}
.amro-human-loop--compact > span:nth-child(3) {
  display: none;
}

@media (max-width: 720px) {
  .amro-form-grid,
  .amro-attachment-row,
  .amro-control-boundary__grid {
    grid-template-columns: 1fr;
  }
  .amro-issue-composer > header,
  .amro-issue-composer > footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-agent-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .amro-agent-row > button {
    grid-column: 2 / -1;
    justify-self: start;
  }
  .amro-live-outcome,
  .amro-human-loop {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .amro-live-outcome > span:nth-child(3),
  .amro-live-outcome > .amro-button,
  .amro-human-loop > span:nth-child(3),
  .amro-human-loop > .amro-button {
    grid-column: 2;
    justify-self: start;
  }
  .amro-trusted-knowledge__list > button {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .amro-trusted-knowledge__list > button > .amro-badge,
  .amro-trusted-knowledge__list > button > .amro-status-indicator {
    grid-column: 2;
    justify-self: start;
  }
}

.amro-step-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amro-step-rail li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--amro-space-2);
  align-items: start;
  position: relative;
}

.amro-step-rail li:not(:last-child)::after {
  content: "";
  height: 1px;
  background: var(--amro-border);
  position: absolute;
  top: 15px;
  left: 30px;
  right: calc(var(--amro-space-3) * -1);
}

.amro-step-rail__marker {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 30px;
  height: 30px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
}

.amro-step-rail__marker svg {
  width: 15px;
}
.amro-step-rail__marker[data-status="active"] {
  border-color: var(--amro-accent-cyan);
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-shadow-ai-glow);
}
.amro-step-rail__marker[data-status="complete"] {
  border-color: var(--amro-accent-teal);
  color: var(--amro-canvas);
  background: var(--amro-accent-teal);
}
.amro-step-rail__marker[data-status="blocked"],
.amro-step-rail__marker[data-status="error"] {
  border-style: dashed;
}
.amro-step-rail__copy {
  display: grid;
  gap: var(--amro-space-1);
  padding-top: var(--amro-space-1);
}
.amro-step-rail__copy small {
  color: var(--amro-foreground-muted);
}
.amro-step-rail--vertical {
  grid-template-columns: 1fr;
}
.amro-step-rail--vertical li:not(:last-child)::after {
  width: 1px;
  height: auto;
  top: 30px;
  bottom: calc(var(--amro-space-3) * -1);
  left: 15px;
  right: auto;
}

.amro-booking-calendar {
  width: min(100%, 430px);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-booking-calendar > header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--amro-space-2);
  margin-bottom: var(--amro-space-4);
  text-align: center;
}
.amro-booking-calendar > header button {
  display: grid;
  place-items: center;
  height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: transparent;
  cursor: pointer;
}
.amro-booking-calendar > header svg {
  width: 17px;
}
.amro-booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--amro-space-1);
}
.amro-booking-calendar__grid > span {
  padding-block: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-align: center;
}
.amro-booking-calendar__grid > button {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.amro-booking-calendar__grid > button:hover:not(:disabled),
.amro-booking-calendar__grid > button:focus-visible {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 10%, transparent);
}
.amro-booking-calendar__grid > button[aria-selected="true"] {
  color: var(--amro-canvas);
  background: var(--amro-accent-teal);
}
.amro-booking-calendar__grid > button:disabled {
  color: color-mix(in srgb, var(--amro-foreground-muted) 45%, transparent);
  cursor: not-allowed;
}

.amro-compare {
  display: grid;
  width: min(100%, 640px);
  gap: var(--amro-space-4);
}
.amro-compare__canvas {
  min-height: 290px;
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
  position: relative;
}
.amro-compare__before,
.amro-compare__after {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--amro-space-6);
  position: absolute;
  inset: 0;
}
.amro-compare__after {
  color: var(--amro-canvas);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
}
.amro-compare__before .amro-badge,
.amro-compare__after .amro-badge {
  position: absolute;
  top: var(--amro-space-3);
  left: var(--amro-space-3);
}
.amro-compare__divider {
  width: 2px;
  height: 100%;
  background: var(--amro-foreground);
  position: absolute;
  top: 0;
  transform: translateX(-1px);
}
.amro-compare label {
  display: grid;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-compare input {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}

.amro-availability__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--amro-space-2);
}
.amro-availability button {
  display: grid;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  cursor: pointer;
  font: inherit;
}
.amro-availability button span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-availability button[aria-pressed="true"] {
  border-color: var(--amro-accent-teal);
  background: color-mix(in srgb, var(--amro-accent-teal) 12%, var(--amro-surface));
  box-shadow: inset 0 0 0 1px var(--amro-accent-teal);
}

.amro-publication-gate ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0 0 var(--amro-space-4);
  padding: 0;
  list-style: none;
}
.amro-signature-flow {
  width: min(100%, 760px);
}
.amro-signature-flow .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-5);
}
.amro-signature-flow__hero {
  display: flex;
  align-items: center;
  gap: var(--amro-space-4);
}
.amro-signature-flow__hero > div:last-child,
.amro-approval-summary span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-signature-flow__hero span,
.amro-approval-summary small {
  color: var(--amro-foreground-muted);
}
.amro-approval-summary {
  display: flex;
  gap: var(--amro-space-3);
  align-items: center;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-approval-summary > svg {
  flex: 0 0 auto;
  color: var(--amro-accent-teal);
}
.amro-lesson-player {
  display: grid;
  place-items: center;
  gap: var(--amro-space-4);
  padding: var(--amro-space-6);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
}
.amro-signature-flow blockquote {
  margin: 0;
  border-left: 3px solid var(--amro-accent-cyan);
  padding-left: var(--amro-space-4);
  color: var(--amro-foreground-muted);
}
.amro-signature-flow mark {
  color: var(--amro-foreground);
  background: color-mix(in srgb, var(--amro-accent-cyan) 16%, transparent);
}
.amro-generated-asset {
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--amro-radius-card);
  color: var(--amro-canvas);
  background:
    radial-gradient(circle at 70% 20%, var(--amro-accent-cyan), transparent 32%),
    linear-gradient(145deg, var(--amro-accent-teal), var(--amro-foreground));
}

@media (max-width: 640px) {
  .amro-step-rail {
    grid-template-columns: 1fr;
  }
  .amro-step-rail li:not(:last-child)::after {
    width: 1px;
    height: auto;
    top: 30px;
    bottom: calc(var(--amro-space-3) * -1);
    left: 15px;
    right: auto;
  }
  .amro-booking-calendar {
    padding: var(--amro-space-3);
  }
  .amro-booking-calendar__grid {
    gap: 0;
  }
}

@keyframes amro-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amro-button,
  .amro-tooltip,
  .amro-skeleton::after {
    animation: none;
    transition-duration: 1ms;
  }
}

/* Shared application-system components */
.amro-app-header,
.amro-product-identity,
.amro-live-pulse,
.amro-credit-balance,
.amro-approval-notice,
.amro-toast,
.amro-context-drawer,
.amro-command-palette,
.amro-audit-log,
.amro-activity-timeline,
.amro-product-preview,
.amro-process-diagram,
.amro-gallery-viewer {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-6);
  min-height: 68px;
  border: 1px solid color-mix(in srgb, var(--amro-border) 58%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-3) var(--amro-space-5);
  background: color-mix(in srgb, var(--amro-surface) 90%, transparent);
  box-shadow: var(--amro-shadow-control);
}

.amro-app-header__brand,
.amro-app-header nav,
.amro-app-header__actions,
.amro-product-identity,
.amro-credit-balance,
.amro-approval-notice,
.amro-toast,
.amro-embedded-booking .amro-feature-panel__footer,
.amro-error-recovery .amro-feature-panel__body > div {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-app-header__brand {
  min-width: 0;
  color: inherit;
  font-weight: var(--amro-font-strong);
  text-decoration: none;
}

.amro-app-header__brand svg {
  width: 112px;
  height: auto;
}
.amro-app-header__brand > span {
  padding-left: var(--amro-space-3);
  border-left: 1px solid var(--amro-border);
}
.amro-app-header nav {
  justify-content: center;
}
.amro-app-header nav a {
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-2) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  text-decoration: none;
}
.amro-app-header nav a[aria-current="page"] {
  color: var(--amro-foreground);
  background: var(--amro-surface-muted);
}
.amro-app-header__actions {
  justify-content: flex-end;
}
.amro-app-header__menu {
  display: none;
}

.amro-app-header button,
.amro-product-preview button,
.amro-gallery-viewer button,
.amro-process-diagram button,
.amro-credit-balance,
.amro-toast button,
.amro-command-palette button,
.amro-context-drawer button,
.amro-audit-log button {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.amro-product-identity {
  min-width: 0;
}
.amro-product-identity__mark,
.amro-metric-tile__icon,
.amro-empty-state > span:first-child {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--amro-radius-control);
  color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, transparent);
}
.amro-product-identity > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
  min-width: 0;
  margin-right: auto;
}
.amro-product-identity small {
  color: var(--amro-foreground-muted);
}

.amro-talk-now {
  position: relative;
}
.amro-talk-now__pulse,
.amro-live-pulse > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: currentColor;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  animation: amro-shared-pulse var(--amro-duration-pulse) var(--amro-ease-standard) infinite;
}
.amro-talk-now__pulse {
  color: var(--amro-on-accent);
}
.amro-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  width: fit-content;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-status-success);
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: var(--amro-text-xs);
  font-weight: var(--amro-font-strong);
}
.amro-live-pulse--processing {
  color: var(--amro-accent-cyan);
}
.amro-live-pulse--paused {
  color: var(--amro-foreground-muted);
}
.amro-live-pulse--paused > span:first-child {
  animation: none;
}

.amro-metric-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--amro-space-2) var(--amro-space-3);
  min-width: 190px;
}
.amro-metric-tile > span:nth-child(2) {
  align-self: center;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-metric-tile > strong {
  grid-column: 1 / -1;
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
}
.amro-metric-tile > small {
  grid-column: 1 / -1;
  color: var(--amro-status-success);
}
.amro-metric-tile > small[data-trend="down"] {
  color: var(--amro-status-danger);
}
.amro-metric-tile > small[data-trend="neutral"] {
  color: var(--amro-foreground-muted);
}

.amro-process-diagram {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-process-diagram > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--amro-space-4) var(--amro-space-5);
  font-weight: var(--amro-font-strong);
}
.amro-process-diagram > button > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-process-diagram > button[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}
.amro-process-diagram ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--amro-space-3);
  margin: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-5);
  list-style: none;
}
.amro-process-diagram li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-process-diagram li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
}
.amro-process-diagram li[data-status="complete"] > span:first-child {
  color: var(--amro-status-success);
}
.amro-process-diagram li[data-status="active"] > span:first-child {
  color: var(--amro-on-accent);
  background: linear-gradient(135deg, var(--amro-accent-teal), var(--amro-accent-cyan));
  box-shadow: var(--amro-glow-active-ai);
}
.amro-process-diagram li > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-process-diagram li small {
  color: var(--amro-foreground-muted);
}

.amro-product-preview {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-background);
  box-shadow: var(--amro-shadow-card);
}
.amro-product-preview > header {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
  min-height: 46px;
  border-bottom: 1px solid var(--amro-border);
  padding: 0 var(--amro-space-4);
  background: var(--amro-surface);
}
.amro-product-preview > header > span:first-child {
  display: flex;
  gap: var(--amro-space-1);
}
.amro-product-preview > header i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-product-preview__url {
  margin-inline: auto;
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-1) var(--amro-space-4);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-product-preview__canvas {
  min-height: 280px;
  padding: var(--amro-space-5);
}
.amro-product-preview__starter {
  display: grid;
  gap: var(--amro-space-3);
  width: min(100%, 460px);
  border: 1px solid color-mix(in srgb, var(--amro-border) 56%, transparent);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  background: color-mix(in srgb, var(--amro-surface) 78%, transparent);
  box-shadow: var(--amro-shadow-card);
}
.amro-product-preview__starter > strong {
  color: var(--amro-foreground);
  font-size: var(--amro-text-xl);
}
.amro-product-preview__starter > p {
  margin: 0;
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
  line-height: var(--amro-leading-body);
}
.amro-product-preview__starter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--amro-space-2);
  border-top: 1px solid color-mix(in srgb, var(--amro-border) 42%, transparent);
  padding-top: var(--amro-space-3);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-product-preview__starter b {
  color: var(--amro-accent-teal);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-lg);
}

.amro-gallery-viewer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 480px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  padding: var(--amro-space-4);
  background: var(--amro-canvas);
}
.amro-gallery-viewer > header,
.amro-gallery-viewer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-gallery-viewer figure {
  display: grid;
  place-items: center;
  gap: var(--amro-space-3);
  margin: 0;
  padding: var(--amro-space-4);
}
.amro-gallery-viewer img {
  max-width: 100%;
  max-height: 58vh;
  border-radius: var(--amro-radius-card);
  object-fit: contain;
}
.amro-gallery-viewer figcaption {
  color: var(--amro-foreground-muted);
}
.amro-gallery-viewer footer > div {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-gallery-viewer footer > div button {
  width: 8px;
  height: 8px;
  border-radius: var(--amro-radius-full);
  background: var(--amro-border);
}
.amro-gallery-viewer footer > div button[aria-current="true"] {
  background: var(--amro-accent-cyan);
  box-shadow: 0 0 8px var(--amro-accent-cyan);
}

.amro-feature-proof .amro-feature-panel__body > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-4);
  background: var(--amro-surface-muted);
}
.amro-feature-proof .amro-feature-panel__body strong {
  font-size: var(--amro-text-lg);
}
.amro-feature-proof .amro-feature-panel__body span {
  color: var(--amro-foreground-muted);
}
.amro-credit-balance {
  min-height: 36px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  background: var(--amro-surface);
}
.amro-credit-balance svg:first-child {
  color: var(--amro-accent-cyan);
}
.amro-credit-balance span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-credit-balance--low {
  border-color: var(--amro-status-warning);
}

.amro-approval-notice {
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--amro-status-warning) 45%, var(--amro-border));
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-4);
  background: color-mix(in srgb, var(--amro-status-warning) 7%, var(--amro-surface));
}
.amro-approval-notice > svg {
  color: var(--amro-status-warning);
}
.amro-approval-notice > span:nth-child(2) {
  display: grid;
  flex: 1 1 240px;
  gap: var(--amro-space-1);
}
.amro-approval-notice small {
  color: var(--amro-foreground-muted);
}
.amro-embedded-booking .amro-feature-panel__body {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-embedded-booking .amro-feature-panel__body > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--amro-space-2);
}
.amro-embedded-booking .amro-feature-panel__body > div button {
  min-height: 40px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control);
  color: var(--amro-foreground);
  background: var(--amro-background);
}
.amro-embedded-booking .amro-feature-panel__body > div button[aria-pressed="true"] {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-background));
}
.amro-embedded-booking .amro-feature-panel__footer {
  color: var(--amro-foreground-muted);
}

.amro-toast {
  max-width: 420px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-lg);
  padding: var(--amro-space-3) var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-toast > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-status-success);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.amro-toast--error > span:first-child {
  color: var(--amro-status-danger);
}
.amro-toast--warning > span:first-child {
  color: var(--amro-status-warning);
}
.amro-toast > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-toast small {
  color: var(--amro-foreground-muted);
}

.amro-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--amro-space-3);
  border: 1px dashed var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-6);
  color: var(--amro-foreground);
  text-align: center;
  font-family: var(--amro-font-sans);
}
.amro-empty-state p {
  max-width: 46ch;
  margin: 0;
  color: var(--amro-foreground-muted);
}
.amro-empty-state > div {
  display: flex;
  gap: var(--amro-space-2);
}
.amro-skeleton-card {
  display: grid;
  gap: var(--amro-space-3);
}
.amro-skeleton-card__media {
  height: 160px;
  border-radius: var(--amro-radius-control-lg);
}
.amro-skeleton-card__title {
  width: 58%;
  height: 24px;
}
.amro-skeleton-card__row {
  height: 14px;
}
.amro-skeleton-card__row:last-child {
  width: 72%;
}

.amro-command-palette {
  overflow: hidden;
  max-width: 640px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-command-palette > header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
}
.amro-command-palette input {
  border: 0;
  outline: 0;
  color: var(--amro-foreground);
  background: transparent;
  font: inherit;
}
.amro-command-palette kbd {
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-control-sm);
  padding: var(--amro-space-1) var(--amro-space-2);
  color: var(--amro-foreground-muted);
  background: var(--amro-background);
  font-family: var(--amro-font-mono);
  font-size: var(--amro-text-xs);
}
.amro-command-palette [role="listbox"] {
  display: grid;
  gap: var(--amro-space-1);
  max-height: 360px;
  overflow: auto;
  padding: var(--amro-space-2);
}
.amro-command-palette [role="option"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  padding: var(--amro-space-3);
  text-align: left;
}
.amro-command-palette [role="option"]:hover {
  background: var(--amro-surface-muted);
}
.amro-command-palette [role="option"] > span:nth-child(2) {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-command-palette small {
  color: var(--amro-foreground-muted);
}

.amro-context-drawer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(100%, 380px);
  min-height: 460px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card-lg);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-context-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--amro-space-3);
  border-bottom: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
}
.amro-context-drawer > header > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-context-drawer small {
  color: var(--amro-foreground-muted);
}
.amro-context-drawer__body {
  overflow: auto;
  padding: var(--amro-space-4);
}
.amro-context-drawer > footer {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
}

.amro-activity-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--amro-foreground);
  list-style: none;
}
.amro-activity-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--amro-space-3);
  min-height: 66px;
}
.amro-activity-timeline li::before {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 14px;
  width: 1px;
  background: var(--amro-border);
  content: "";
}
.amro-activity-timeline li:last-child::before {
  display: none;
}
.amro-activity-timeline li > span:first-child {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--amro-radius-full);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
}
.amro-activity-timeline li[data-status="complete"] > span:first-child {
  color: var(--amro-status-success);
}
.amro-activity-timeline li[data-status="active"] > span:first-child {
  color: var(--amro-accent-cyan);
  box-shadow: var(--amro-glow-active-ai);
}
.amro-activity-timeline li > span:nth-child(2) {
  display: grid;
  align-content: start;
  gap: var(--amro-space-1);
}
.amro-activity-timeline small,
.amro-activity-timeline time {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}
.amro-activity-timeline time {
  font-variant-numeric: tabular-nums;
}

.amro-audit-log {
  overflow-x: auto;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-audit-log table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.amro-audit-log caption {
  padding: var(--amro-space-4);
  font-weight: var(--amro-font-strong);
  text-align: left;
}
.amro-audit-log th,
.amro-audit-log td {
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-3) var(--amro-space-4);
  white-space: nowrap;
}
.amro-audit-log th {
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-audit-log button {
  color: var(--amro-accent-cyan);
}
.amro-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes amro-shared-pulse {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (max-width: 720px) {
  .amro-app-header {
    grid-template-columns: auto 1fr auto;
    gap: var(--amro-space-3);
  }
  .amro-app-header__menu {
    display: inline-grid;
    place-items: center;
  }
  .amro-app-header nav {
    display: none;
  }
  .amro-app-header__brand svg {
    width: 94px;
  }
  .amro-process-diagram ol {
    grid-template-columns: 1fr;
  }
  .amro-process-diagram li > svg {
    transform: rotate(90deg);
  }
  .amro-product-preview__url {
    display: none;
  }
  .amro-audit-log {
    border-radius: var(--amro-radius-control-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amro-talk-now__pulse,
  .amro-live-pulse > span:first-child {
    animation: none;
  }
}

/* AmroGen sales workflow */
.amro-sales-brief,
.amro-named-account,
.amro-audience-signal,
.amro-prospect-company,
.amro-decision-maker,
.amro-prospect-stack,
.amro-lead-fit,
.amro-fit-popover {
  color: var(--amro-foreground);
  font-family: var(--amro-font-sans);
}

.amro-sales-brief__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amro-space-4);
}
.amro-sales-brief__grid .amro-field:nth-child(2),
.amro-sales-brief__grid .amro-field:nth-child(5) {
  grid-column: 1 / -1;
}
.amro-sales-brief__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amro-space-4);
  margin-top: var(--amro-space-5);
}
.amro-sales-brief__footer > span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
}

.amro-icp-builder .amro-feature-panel__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--amro-space-5);
}
.amro-icp-builder section {
  min-width: 0;
}
.amro-icp-builder h3 {
  margin: 0 0 var(--amro-space-3);
  font-size: var(--amro-text-sm);
}
.amro-icp-builder section > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-2);
}
.amro-icp-builder section span {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: var(--amro-space-1) var(--amro-space-2) var(--amro-space-1) var(--amro-space-3);
  color: var(--amro-foreground-muted);
  background: var(--amro-surface-muted);
  font-size: var(--amro-text-xs);
}
.amro-icp-builder section button,
.amro-fit-popover button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.amro-icp-builder section button {
  display: grid;
  place-items: center;
  padding: 0;
}
.amro-icp-builder__add {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  gap: var(--amro-space-2);
  padding-top: var(--amro-space-3);
  border-top: 1px solid var(--amro-border);
}

.amro-named-account {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--amro-space-3);
}
.amro-named-account > .amro-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-3);
  padding: var(--amro-space-4);
}
.amro-named-account > .amro-card > svg {
  color: var(--amro-accent-cyan);
}
.amro-named-account > .amro-card > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-named-account small {
  color: var(--amro-foreground-muted);
}

.amro-audience-signal {
  display: inline-flex;
}
.amro-audience-signal > button {
  display: inline-flex;
  align-items: center;
  gap: var(--amro-space-2);
  min-height: 34px;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-full);
  padding: 0 var(--amro-space-3);
  color: var(--amro-foreground);
  background: var(--amro-surface);
  font: inherit;
  cursor: pointer;
}
.amro-audience-signal[data-selected="true"] > button {
  border-color: var(--amro-accent-cyan);
  background: color-mix(in srgb, var(--amro-accent-cyan) 12%, var(--amro-surface));
}
.amro-audience-signal svg {
  color: var(--amro-accent-cyan);
}
.amro-audience-signal small {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-xs);
  text-transform: capitalize;
}

.amro-prospect-company {
  display: grid;
  gap: var(--amro-space-4);
  transition: border-color var(--amro-duration-state) var(--amro-ease-standard);
}
.amro-prospect-company--selected {
  border-color: var(--amro-accent-cyan);
}
.amro-prospect-company header,
.amro-decision-maker header,
.amro-decision-maker footer {
  display: flex;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-prospect-company header > span,
.amro-decision-maker header > span {
  display: grid;
  flex: 1;
  gap: var(--amro-space-1);
}
.amro-prospect-company small,
.amro-decision-maker small {
  color: var(--amro-foreground-muted);
}
.amro-prospect-company__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amro-space-4);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-prospect-company__meta span {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
}
.amro-prospect-company__fit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-prospect-company__fit > span {
  display: flex;
  align-items: baseline;
  gap: var(--amro-space-1);
}
.amro-prospect-company__fit > span strong {
  font-size: var(--amro-text-xl);
  font-variant-numeric: tabular-nums;
}
.amro-prospect-company meter,
.amro-lead-fit meter {
  width: 100%;
  accent-color: var(--amro-accent-teal);
}
.amro-prospect-company ul {
  display: grid;
  gap: var(--amro-space-2);
  margin: 0;
  padding: var(--amro-space-3);
  border-radius: var(--amro-radius-control);
  background: var(--amro-surface-muted);
  list-style: none;
}
.amro-prospect-company li {
  display: flex;
  align-items: center;
  gap: var(--amro-space-2);
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}
.amro-prospect-company li svg {
  color: var(--amro-status-success);
}

.amro-decision-maker {
  display: grid;
  gap: var(--amro-space-4);
}
.amro-decision-maker p {
  margin: 0;
  color: var(--amro-foreground-muted);
  line-height: var(--amro-leading-body);
}
.amro-decision-maker footer {
  justify-content: flex-end;
  border-top: 1px solid var(--amro-border);
  padding-top: var(--amro-space-3);
}

.amro-prospect-stack {
  position: relative;
  display: grid;
  gap: var(--amro-space-3);
  isolation: isolate;
}
.amro-prospect-stack__depth {
  position: absolute;
  z-index: -1;
  inset: var(--amro-space-3) var(--amro-space-4) calc(var(--amro-space-3) * -1);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface-muted);
}
.amro-prospect-stack > footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--amro-space-2);
  padding: var(--amro-space-2) var(--amro-space-4) 0;
}
.amro-prospect-stack > footer > span {
  color: var(--amro-foreground-muted);
  font-size: var(--amro-text-sm);
}

.amro-lead-fit {
  overflow: hidden;
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  background: var(--amro-surface);
}
.amro-lead-fit > button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-4);
  width: 100%;
  border: 0;
  padding: var(--amro-space-4);
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.amro-lead-fit > button > span:nth-child(2),
.amro-lead-fit li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-lead-fit small {
  color: var(--amro-foreground-muted);
}
.amro-lead-fit__ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--amro-radius-full);
  background:
    radial-gradient(circle, var(--amro-surface) 58%, transparent 60%),
    conic-gradient(var(--amro-accent-teal) var(--amro-fit-score), var(--amro-surface-muted) 0);
}
.amro-lead-fit__ring strong {
  grid-area: 1 / 1;
  font-size: var(--amro-text-lg);
}
.amro-lead-fit__ring small {
  grid-area: 2 / 1;
  margin-top: calc(var(--amro-space-5) * -1);
  font-size: var(--amro-text-xs);
}
.amro-lead-fit ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: 0;
  border-top: 1px solid var(--amro-border);
  padding: var(--amro-space-4);
  list-style: none;
}
.amro-lead-fit li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(100px, 2fr) auto;
  align-items: center;
  gap: var(--amro-space-3);
}

.amro-fit-popover {
  position: relative;
  width: fit-content;
}
.amro-fit-popover [role="dialog"] {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--amro-space-2));
  width: min(360px, 88vw);
  border: 1px solid var(--amro-border);
  border-radius: var(--amro-radius-card);
  padding: var(--amro-space-4);
  background: var(--amro-surface);
  box-shadow: var(--amro-shadow-card);
}
.amro-fit-popover [role="dialog"] header {
  display: flex;
  justify-content: space-between;
  gap: var(--amro-space-3);
}
.amro-fit-popover ul {
  display: grid;
  gap: var(--amro-space-3);
  margin: var(--amro-space-4) 0;
  padding: 0;
  list-style: none;
}
.amro-fit-popover li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--amro-space-3);
}
.amro-fit-popover li > svg {
  color: var(--amro-status-success);
}
.amro-fit-popover li > span {
  display: grid;
  gap: var(--amro-space-1);
}
.amro-fit-popover small {
  color: var(--amro-foreground-muted);
}

@media (max-width: 640px) {
  .amro-sales-brief__grid,
  .amro-icp-builder .amro-feature-panel__body {
    grid-template-columns: 1fr;
  }
  .amro-sales-brief__grid .amro-field {
    grid-column: auto;
  }
  .amro-sales-brief__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .amro-icp-builder__add {
    grid-template-columns: 1fr;
  }
  .amro-named-account {
    grid-template-columns: 1fr;
  }
  .amro-named-account > .amro-card {
    grid-template-columns: auto 1fr;
  }
  .amro-named-account > .amro-card .amro-badge,
  .amro-named-account > .amro-card .amro-button {
    grid-column: 1 / -1;
  }
  .amro-prospect-stack > footer {
    grid-template-columns: 1fr 1fr;
  }
  .amro-prospect-stack > footer > span {
    grid-column: 1 / -1;
  }
}
```

## Usage

Shared runtime files installed automatically with every AmroUI component.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-generation.md

Installable AmroUI product component source.

# AmroUI generation

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-generation.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-generation.json)

## Source

### source/components/generation.tsx

```tsx
import {
  ArrowRight,
  Check,
  ChevronRight,
  Cloud,
  Code2,
  Copy,
  Crop,
  Download,
  ExternalLink,
  FolderHeart,
  History,
  Image as ImageIcon,
  Layers3,
  Palette,
  RefreshCw,
  Server,
  ShieldCheck,
  Sparkles,
  Type,
  Upload,
  WandSparkles,
  X
} from "lucide-react";
import { useState, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import { Card } from "./card.js";
import { EmptyNotice, FeaturePanel, StatusIndicator } from "./feature-primitives.js";
import { Input, RangeInput, Select, Textarea } from "./input.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export interface ImageGenerationBrief {
  prompt: string;
  negativePrompt: string;
  style: string;
  width: number;
  height: number;
}
export interface ImagePromptWorkbenchProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<ImageGenerationBrief>;
  referenceCount?: number;
  onSubmit?: (brief: ImageGenerationBrief) => void;
  onAddReference?: () => void;
}
export function ImagePromptWorkbench({
  className,
  defaultValue,
  onAddReference,
  onSubmit,
  referenceCount = 2,
  ...props
}: ImagePromptWorkbenchProps) {
  const [brief, setBrief] = useState<ImageGenerationBrief>({
    prompt:
      defaultValue?.prompt ??
      "Editorial hero showing a governed AI agent coordinating customer operations, calm premium lighting, clear human approval checkpoint",
    negativePrompt:
      defaultValue?.negativePrompt ?? "text, logos, generic robot, cluttered dashboard",
    style: defaultValue?.style ?? "Editorial product realism",
    width: defaultValue?.width ?? 1600,
    height: defaultValue?.height ?? 900
  });
  const update = <K extends keyof ImageGenerationBrief>(key: K, value: ImageGenerationBrief[K]) =>
    setBrief((current) => ({ ...current, [key]: value }));
  return (
    <form
      className={cn("amro-image-workbench", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (brief.prompt.trim()) onSubmit?.(brief);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Image prompt"
        title="Create a production-ready visual"
        description="Control composition, exclusions, style, dimensions, and references."
        status={<Badge tone="neutral">{referenceCount} references</Badge>}
      >
        <label>
          <span>Prompt</span>
          <Textarea
            onChange={(event) => update("prompt", event.target.value)}
            value={brief.prompt}
          />
          <small>
            {brief.prompt.length} characters · describe subject, composition, mood, and use
          </small>
        </label>
        <label>
          <span>Negative prompt</span>
          <Textarea
            onChange={(event) => update("negativePrompt", event.target.value)}
            value={brief.negativePrompt}
          />
        </label>
        <div>
          <Input
            label="Style"
            value={brief.style}
            onChange={(event) => update("style", event.target.value)}
          />
          <Input
            label="Width"
            min="256"
            step="64"
            type="number"
            value={brief.width}
            onChange={(event) => update("width", Number(event.target.value))}
          />
          <Input
            label="Height"
            min="256"
            step="64"
            type="number"
            value={brief.height}
            onChange={(event) => update("height", Number(event.target.value))}
          />
        </div>
        <footer>
          {onAddReference && (
            <Button onClick={onAddReference} variant="secondary">
              <Upload aria-hidden="true" />
              Add reference
            </Button>
          )}
          <span>
            {brief.width} × {brief.height} · {Math.round((brief.width / brief.height) * 100) / 100}
            :1
          </span>
          <Button disabled={!brief.prompt.trim()} type="submit">
            Generate image
            <Sparkles aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface PromptBrief {
  purpose: string;
  audience: string;
  placement: string;
  brand: string;
  direction: string;
}
export interface PromptBriefBuilderProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<PromptBrief>;
  onSubmit?: (brief: PromptBrief) => void;
}
export function PromptBriefBuilder({
  className,
  defaultValue,
  onSubmit,
  ...props
}: PromptBriefBuilderProps) {
  const [brief, setBrief] = useState<PromptBrief>({
    purpose: defaultValue?.purpose ?? "Launch campaign hero",
    audience: defaultValue?.audience ?? "AI operations leaders",
    placement: defaultValue?.placement ?? "Website hero and LinkedIn campaign",
    brand: defaultValue?.brand ?? "Amro",
    direction: defaultValue?.direction ?? "Trustworthy, outcome-led, premium, no sci-fi clichés"
  });
  const update = (key: keyof PromptBrief, value: string) =>
    setBrief((current) => ({ ...current, [key]: value }));
  const complete = [
    brief.purpose,
    brief.audience,
    brief.placement,
    brief.brand,
    brief.direction
  ].every((value) => value.trim().length > 0);
  return (
    <form
      className={cn("amro-prompt-brief", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (complete) onSubmit?.(brief);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Creative brief"
        title="Turn campaign intent into visual direction"
        status={
          <StatusIndicator
            label={complete ? "Ready" : "Incomplete"}
            status={complete ? "success" : "warning"}
          />
        }
      >
        <div>
          {(["purpose", "audience", "placement", "brand", "direction"] as const).map((key) => (
            <Input
              key={key}
              label={
                key === "direction" ? "Visual direction" : `${key[0]?.toUpperCase()}${key.slice(1)}`
              }
              value={brief[key]}
              onChange={(event) => update(key, event.target.value)}
            />
          ))}
        </div>
        <footer>
          <span>
            <WandSparkles aria-hidden="true" />
            AmroVisionAI will enhance this into a production prompt.
          </span>
          <Button disabled={!complete} type="submit">
            Build prompt
            <ArrowRight aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface PromptEnhancementDiffProps extends HTMLAttributes<HTMLDivElement> {
  original?: string;
  enhanced?: string;
  additions?: readonly string[];
  onAccept?: (enhanced: string) => void;
  onRevert?: () => void;
}
export function PromptEnhancementDiff({
  additions = [
    "16:9 editorial composition",
    "negative space for headline",
    "brand teal/cyan practical lighting",
    "realistic human oversight"
  ],
  className,
  enhanced = "Editorial 16:9 campaign hero: a governed AI operations workspace coordinating visible workflow steps, with a human approval checkpoint, premium dark-navy environment, practical teal and cyan light, credible people, negative space on the left for a headline, refined product realism, no text or logos.",
  onAccept,
  onRevert,
  original = "AI agent coordinating customer operations with human approval",
  ...props
}: PromptEnhancementDiffProps) {
  return (
    <FeaturePanel
      className={cn("amro-prompt-diff", className)}
      eyebrow="Prompt enhancement"
      title="Production detail added without changing intent"
      {...props}
    >
      <div>
        <section>
          <Badge tone="neutral">Your prompt</Badge>
          <p>{original}</p>
        </section>
        <ArrowRight aria-hidden="true" />
        <section>
          <Badge tone="success">Enhanced prompt</Badge>
          <p>{enhanced}</p>
        </section>
      </div>
      <ul>
        {additions.map((addition) => (
          <li key={addition}>
            <Check aria-hidden="true" />
            {addition}
          </li>
        ))}
      </ul>
      <footer>
        {onRevert && (
          <Button onClick={onRevert} variant="tertiary">
            Use original
          </Button>
        )}
        {onAccept && <Button onClick={() => onAccept(enhanced)}>Use enhanced prompt</Button>}
      </footer>
    </FeaturePanel>
  );
}

export interface ModelProvider {
  id: string;
  name: ReactNode;
  status: "healthy" | "degraded" | "offline";
  latencyMs?: number;
  active?: boolean;
  fallbackOrder?: number;
}
export interface ModelProviderStripProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  providers?: readonly ModelProvider[];
  onSelect?: (provider: ModelProvider) => void;
}
const modelProviders: readonly ModelProvider[] = [
  {
    id: "primary",
    name: "Amro Render Pro",
    status: "healthy",
    latencyMs: 820,
    active: true,
    fallbackOrder: 1
  },
  { id: "fallback-a", name: "Vision Studio", status: "healthy", latencyMs: 1040, fallbackOrder: 2 },
  { id: "fallback-b", name: "Canvas XL", status: "degraded", latencyMs: 1880, fallbackOrder: 3 }
];
export function ModelProviderStrip({
  className,
  onSelect,
  providers = modelProviders,
  ...props
}: ModelProviderStripProps) {
  return (
    <div className={cn("amro-provider-strip", className)} {...props}>
      <span>
        <Cloud aria-hidden="true" />
        <strong>Model routing</strong>
      </span>
      {providers.map((provider) => (
        <button
          data-active={provider.active}
          key={provider.id}
          onClick={() => onSelect?.(provider)}
          type="button"
        >
          <span>
            <strong>{provider.name}</strong>
            <small>
              {provider.active ? "Active provider" : `Fallback ${provider.fallbackOrder}`}
            </small>
          </span>
          <StatusIndicator
            label={`${provider.status}${provider.latencyMs ? ` · ${provider.latencyMs} ms` : ""}`}
            status={
              provider.status === "healthy"
                ? "online"
                : provider.status === "degraded"
                  ? "warning"
                  : "offline"
            }
          />
        </button>
      ))}
    </div>
  );
}

export interface FallbackEventNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  from?: ReactNode;
  to?: ReactNode;
  reason?: ReactNode;
  impact?: ReactNode;
  title?: ReactNode;
}
export function FallbackEventNotice({
  className,
  from = "Amro Render Pro",
  impact = "Your prompt, dimensions, seed, and storage destination were preserved.",
  reason = "The primary provider exceeded the rendering timeout.",
  title = "A fallback provider completed this image",
  to = "Vision Studio",
  ...props
}: FallbackEventNoticeProps) {
  return (
    <div className={cn("amro-fallback-notice", className)} role="status" {...props}>
      <RefreshCw aria-hidden="true" />
      <span>
        <strong>{title}</strong>
        <small>{reason}</small>
        <span>
          <Badge tone="neutral">{from}</Badge>
          <ArrowRight aria-hidden="true" />
          <Badge tone="success">{to}</Badge>
        </span>
        <p>{impact}</p>
      </span>
    </div>
  );
}

export interface GeneratedImageAsset {
  id: string;
  src?: string;
  alt?: string;
  prompt?: string;
  width?: number;
  height?: number;
  provider?: ReactNode;
}
export type GenerationCanvasState =
  "idle" | "loading" | "preview" | "result" | "error" | "moderation";
export interface GenerationCanvasProps extends HTMLAttributes<HTMLDivElement> {
  state?: GenerationCanvasState;
  asset?: GeneratedImageAsset;
  progress?: number;
  previewLabel?: ReactNode;
  error?: ReactNode;
  moderationReason?: ReactNode;
  onRetry?: () => void;
  onEditPrompt?: () => void;
  onUseAsset?: (asset: GeneratedImageAsset) => void;
}
const sampleGeneratedAsset: GeneratedImageAsset = {
  id: "asset",
  alt: "Governed AI operations campaign visual",
  prompt: "Governed AI workspace with a human approval checkpoint",
  width: 1600,
  height: 900,
  provider: "Amro Render Pro"
};
export function GenerationCanvas({
  asset = sampleGeneratedAsset,
  className,
  error = "The provider could not complete this render.",
  moderationReason = "The request needs revision before it can be generated safely.",
  onEditPrompt,
  onRetry,
  onUseAsset,
  previewLabel = "Composition preview",
  progress = 64,
  state = "result",
  ...props
}: GenerationCanvasProps) {
  return (
    <div
      className={cn("amro-generation-canvas", `amro-generation-canvas--${state}`, className)}
      {...props}
    >
      <header>
        <span>
          <strong>Generation canvas</strong>
          <small>
            {state === "loading"
              ? "Rendering and storing a durable asset"
              : state === "result"
                ? `${asset.width} × ${asset.height} · ${getAccessibleText(asset.provider, "AI provider")}`
                : previewLabel}
          </small>
        </span>
        <StatusIndicator
          label={state}
          status={
            state === "result"
              ? "success"
              : state === "loading"
                ? "loading"
                : state === "moderation" || state === "error"
                  ? "error"
                  : "idle"
          }
        />
      </header>
      <div className="amro-generation-canvas__stage">
        {state === "result" && asset.src ? (
          <img alt={asset.alt ?? "Generated visual"} src={asset.src} />
        ) : state === "result" || state === "preview" ? (
          <div className="amro-generation-canvas__art">
            <Sparkles aria-hidden="true" />
            <span>Governed AI operations</span>
            <small>{asset.prompt}</small>
          </div>
        ) : state === "loading" ? (
          <div className="amro-generation-canvas__loading">
            <Sparkles aria-hidden="true" />
            <strong>Rendering visual…</strong>
            <progress max="100" value={progress}>
              {progress}%
            </progress>
            <small>{progress}% · provider output will be stored automatically</small>
          </div>
        ) : state === "error" || state === "moderation" ? (
          <div className="amro-generation-canvas__error">
            <ShieldCheck aria-hidden="true" />
            <strong>{state === "moderation" ? "Generation paused" : "Render failed"}</strong>
            <p>{state === "moderation" ? moderationReason : error}</p>
            <span>
              {onEditPrompt && (
                <Button onClick={onEditPrompt} variant="secondary">
                  Edit prompt
                </Button>
              )}
              {onRetry && state === "error" && <Button onClick={onRetry}>Try again</Button>}
            </span>
          </div>
        ) : (
          <EmptyNotice
            title="Your visual starts here"
            description="Add a production prompt, dimensions, and references to begin."
          />
        )}
      </div>
      {state === "result" && (
        <footer>
          <span>
            <Cloud aria-hidden="true" />
            Asset stored with reusable URL
          </span>
          {onUseAsset && (
            <Button onClick={() => onUseAsset(asset)}>
              Use asset
              <ArrowRight aria-hidden="true" />
            </Button>
          )}
        </footer>
      )}
    </div>
  );
}

export interface ImageVariant extends GeneratedImageAsset {
  label?: ReactNode;
  selected?: boolean;
}
export interface ImageVariantGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  variants?: readonly ImageVariant[];
  value?: string;
  onSelect?: (variant: ImageVariant) => void;
  onCompare?: (variants: readonly ImageVariant[]) => void;
}
const imageVariants: readonly ImageVariant[] = [
  { id: "a", label: "A · Balanced", prompt: "Balanced composition", width: 1600, height: 900 },
  {
    id: "b",
    label: "B · Human-led",
    prompt: "Human approval emphasized",
    width: 1600,
    height: 900
  },
  {
    id: "c",
    label: "C · Product-led",
    prompt: "Product workflow emphasized",
    width: 1600,
    height: 900
  },
  { id: "d", label: "D · Editorial", prompt: "Editorial abstraction", width: 1600, height: 900 }
];
export function ImageVariantGrid({
  className,
  onCompare,
  onSelect,
  value: controlled,
  variants = imageVariants,
  ...props
}: ImageVariantGridProps) {
  const [internal, setInternal] = useState(variants[0]?.id);
  const value = controlled ?? internal;
  return (
    <div className={cn("amro-variant-grid", className)} {...props}>
      <header>
        <span>
          <strong>Generated variants</strong>
          <small>Select one to continue</small>
        </span>
        <Button
          disabled={variants.length < 2}
          onClick={() => onCompare?.(variants)}
          size="sm"
          variant="secondary"
        >
          Compare
        </Button>
      </header>
      <div>
        {variants.map((variant, index) => (
          <button
            aria-pressed={value === variant.id}
            key={variant.id}
            onClick={() => {
              setInternal(variant.id);
              onSelect?.(variant);
            }}
            type="button"
          >
            <span className="amro-variant-grid__art" data-variant={index}>
              <Sparkles aria-hidden="true" />
            </span>
            <span>
              <strong>{variant.label ?? `Variant ${index + 1}`}</strong>
              <small>{variant.prompt}</small>
            </span>
            {value === variant.id && (
              <Badge tone="success">
                <Check aria-hidden="true" />
                Selected
              </Badge>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

export type VariationAction =
  "more-like-this" | "stronger-brand" | "alternate-framing" | "new-palette";
export interface VariationControlsProps extends HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  onAction?: (action: VariationAction, strength: number) => void;
}
const variationActions: readonly {
  id: VariationAction;
  label: string;
  detail: string;
  icon: ReactNode;
}[] = [
  {
    id: "more-like-this",
    label: "More like this",
    detail: "Preserve subject and art direction",
    icon: <Layers3 aria-hidden="true" />
  },
  {
    id: "stronger-brand",
    label: "Stronger brand",
    detail: "Increase palette and style influence",
    icon: <ShieldCheck aria-hidden="true" />
  },
  {
    id: "alternate-framing",
    label: "Alternate framing",
    detail: "Change camera and composition",
    icon: <Crop aria-hidden="true" />
  },
  {
    id: "new-palette",
    label: "New palette",
    detail: "Keep content, shift colour system",
    icon: <Palette aria-hidden="true" />
  }
];
export function VariationControls({
  className,
  disabled = false,
  onAction,
  ...props
}: VariationControlsProps) {
  const [strength, setStrength] = useState(70);
  return (
    <div className={cn("amro-variation-controls", className)} {...props}>
      <header>
        <span>
          <strong>Create variations</strong>
          <small>Control how much of the selected visual is preserved</small>
        </span>
        <label>
          Similarity <strong>{strength}%</strong>
          <RangeInput
            max="100"
            min="10"
            onChange={(event) => setStrength(Number(event.target.value))}
            value={strength}
          />
        </label>
      </header>
      <div>
        {variationActions.map((action) => (
          <button
            disabled={disabled}
            key={action.id}
            onClick={() => onAction?.(action.id, strength)}
            type="button"
          >
            <span>{action.icon}</span>
            <span>
              <strong>{action.label}</strong>
              <small>{action.detail}</small>
            </span>
            <ChevronRight aria-hidden="true" />
          </button>
        ))}
      </div>
    </div>
  );
}

export interface ReferenceImage {
  id: string;
  src?: string;
  name: ReactNode;
  influence: number;
  role?: "style" | "subject" | "composition" | "palette";
}
export interface ReferenceImageTrayProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  references?: readonly ReferenceImage[];
  onChange?: (references: readonly ReferenceImage[]) => void;
  onAdd?: () => void;
}
const referenceImages: readonly ReferenceImage[] = [
  { id: "brand", name: "Amro campaign style", influence: 78, role: "style" },
  { id: "product", name: "Product workspace", influence: 62, role: "composition" }
];
export function ReferenceImageTray({
  className,
  onAdd,
  onChange,
  references = referenceImages,
  ...props
}: ReferenceImageTrayProps) {
  const [items, setItems] = useState([...references]);
  const update = (id: string, patch: Partial<ReferenceImage>) => {
    const next = items.map((item) => (item.id === id ? { ...item, ...patch } : item));
    setItems(next);
    onChange?.(next);
  };
  const remove = (id: string) => {
    const next = items.filter((item) => item.id !== id);
    setItems(next);
    onChange?.(next);
  };
  return (
    <div className={cn("amro-reference-tray", className)} {...props}>
      <header>
        <span>
          <strong>Reference images</strong>
          <small>{items.length} inputs · influence is explicit</small>
        </span>
        {onAdd && (
          <Button onClick={onAdd} size="sm" variant="secondary">
            <Upload aria-hidden="true" />
            Add
          </Button>
        )}
      </header>
      <div>
        {items.map((item, index) => (
          <article key={item.id}>
            <span className="amro-reference-tray__thumb" data-variant={index}>
              {item.src ? <img alt="" src={item.src} /> : <ImageIcon aria-hidden="true" />}
            </span>
            <span>
              <strong>{item.name}</strong>
              <label>
                <span>Influence {item.influence}%</span>
                <RangeInput
                  max="100"
                  min="0"
                  onChange={(event) => update(item.id, { influence: Number(event.target.value) })}
                  value={item.influence}
                />
              </label>
            </span>
            <Select
              aria-label={`Role for ${getAccessibleText(item.name, "reference image")}`}
              onChange={(event) =>
                update(item.id, {
                  role: event.target.value as NonNullable<ReferenceImage["role"]>
                })
              }
              value={item.role}
            >
              <option value="style">Style</option>
              <option value="subject">Subject</option>
              <option value="composition">Composition</option>
              <option value="palette">Palette</option>
            </Select>
            <button
              aria-label={`Remove ${getAccessibleText(item.name, "reference image")}`}
              onClick={() => remove(item.id)}
              type="button"
            >
              <X aria-hidden="true" />
            </button>
          </article>
        ))}
      </div>
    </div>
  );
}

export interface StyleRecipe {
  id: string;
  name: ReactNode;
  description?: ReactNode;
  lighting: ReactNode;
  composition: ReactNode;
  texture: ReactNode;
  palette: readonly string[];
}
export interface StyleRecipeCardProps extends HTMLAttributes<HTMLDivElement> {
  recipe?: StyleRecipe;
  selected?: boolean;
  onUse?: (recipe: StyleRecipe) => void;
  onEdit?: (recipe: StyleRecipe) => void;
}
const sampleRecipe: StyleRecipe = {
  id: "editorial",
  name: "Amro editorial realism",
  description: "Premium product storytelling without sci-fi clichés.",
  lighting: "Soft practical teal/cyan",
  composition: "Human-led, negative space",
  texture: "Clean photographic detail",
  palette: ["accent-teal", "accent-cyan", "deep-navy"]
};
export function StyleRecipeCard({
  className,
  onEdit,
  onUse,
  recipe = sampleRecipe,
  selected = false,
  ...props
}: StyleRecipeCardProps) {
  return (
    <Card
      className={cn("amro-style-recipe", selected && "amro-style-recipe--selected", className)}
      {...props}
    >
      <div className="amro-style-recipe__preview">
        <Palette aria-hidden="true" />
        <span>
          {recipe.palette.map((color) => (
            <i data-color={color} key={color} />
          ))}
        </span>
      </div>
      <header>
        <span>
          <strong>{recipe.name}</strong>
          <small>{recipe.description}</small>
        </span>
        {selected && (
          <Badge tone="success">
            <Check aria-hidden="true" />
            Applied
          </Badge>
        )}
      </header>
      <dl>
        <div>
          <dt>Lighting</dt>
          <dd>{recipe.lighting}</dd>
        </div>
        <div>
          <dt>Composition</dt>
          <dd>{recipe.composition}</dd>
        </div>
        <div>
          <dt>Texture</dt>
          <dd>{recipe.texture}</dd>
        </div>
      </dl>
      <footer>
        {onEdit && (
          <Button onClick={() => onEdit(recipe)} variant="tertiary">
            Edit recipe
          </Button>
        )}
        {onUse && (
          <Button onClick={() => onUse(recipe)}>{selected ? "Use again" : "Use recipe"}</Button>
        )}
      </footer>
    </Card>
  );
}

export interface BrandVisualProfileData {
  name: ReactNode;
  palette: readonly string[];
  logoRule: ReactNode;
  photography: ReactNode;
  exclusions: readonly ReactNode[];
  strength?: number;
}
export interface BrandVisualProfileProps extends HTMLAttributes<HTMLDivElement> {
  profile?: BrandVisualProfileData;
  onEdit?: () => void;
}
const visualProfile: BrandVisualProfileData = {
  name: "Amro visual system",
  palette: ["accent-teal", "accent-cyan", "deep-navy", "soft-mist"],
  logoRule: "Clear space equal to mark width; never place over detail",
  photography: "Credible people, practical work, calm premium light",
  exclusions: ["Generic robots", "Neon sci-fi cities", "Unapproved logo variants"],
  strength: 82
};
export function BrandVisualProfile({
  className,
  onEdit,
  profile = visualProfile,
  ...props
}: BrandVisualProfileProps) {
  return (
    <FeaturePanel
      className={cn("amro-brand-visual", className)}
      eyebrow="Brand visual profile"
      title={profile.name}
      description="Applied to prompts, validation, and variations."
      status={<Badge tone="success">{profile.strength}% influence</Badge>}
      {...props}
    >
      <div className="amro-brand-visual__palette">
        {profile.palette.map((color) => (
          <span data-color={color} key={color}>
            <i />
            <small>{color}</small>
          </span>
        ))}
      </div>
      <dl>
        <div>
          <dt>Logo rules</dt>
          <dd>{profile.logoRule}</dd>
        </div>
        <div>
          <dt>Photography</dt>
          <dd>{profile.photography}</dd>
        </div>
      </dl>
      <section>
        <strong>Exclude</strong>
        {profile.exclusions.map((item, index) => (
          <Badge key={index} tone="neutral">
            <X aria-hidden="true" />
            {item}
          </Badge>
        ))}
      </section>
      {onEdit && (
        <Button onClick={onEdit} variant="secondary">
          Edit visual profile
        </Button>
      )}
    </FeaturePanel>
  );
}

export interface AspectRatioOption {
  id: string;
  label: ReactNode;
  ratio: number;
  width: number;
  height: number;
  use: ReactNode;
}
export interface AspectRatioPickerProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  options?: readonly AspectRatioOption[];
  value?: string;
  onChange?: (option: AspectRatioOption) => void;
}
const ratioOptions: readonly AspectRatioOption[] = [
  { id: "social", label: "Social", ratio: 1, width: 1080, height: 1080, use: "Feed" },
  { id: "blog", label: "Blog", ratio: 1.5, width: 1200, height: 800, use: "Article" },
  { id: "ad", label: "Ad", ratio: 1.91, width: 1200, height: 628, use: "Campaign" },
  {
    id: "presentation",
    label: "Slide",
    ratio: 1.78,
    width: 1920,
    height: 1080,
    use: "Presentation"
  },
  { id: "hero", label: "Hero", ratio: 2.22, width: 2000, height: 900, use: "Website" }
];
export function AspectRatioPicker({
  className,
  onChange,
  options = ratioOptions,
  value: controlled,
  ...props
}: AspectRatioPickerProps) {
  const [internal, setInternal] = useState(options[0]?.id);
  const value = controlled ?? internal;
  return (
    <fieldset className={cn("amro-ratio-picker", className)} {...props}>
      <legend>Aspect ratio</legend>
      <div>
        {options.map((option) => (
          <label data-selected={value === option.id} key={option.id}>
            <input
              checked={value === option.id}
              name="aspect-ratio"
              onChange={() => {
                setInternal(option.id);
                onChange?.(option);
              }}
              type="radio"
            />
            <span className="amro-ratio-picker__shape" style={{ aspectRatio: option.ratio }}>
              <ImageIcon aria-hidden="true" />
            </span>
            <span>
              <strong>{option.label}</strong>
              <small>
                {option.width} × {option.height} · {option.use}
              </small>
            </span>
          </label>
        ))}
      </div>
    </fieldset>
  );
}

export interface SafeArea {
  id: string;
  label: ReactNode;
  x: number;
  y: number;
  width: number;
  height: number;
  kind: "title" | "logo" | "crop";
}
export interface SafeTextAreaOverlayProps extends HTMLAttributes<HTMLDivElement> {
  imageSrc?: string;
  imageAlt?: string;
  areas?: readonly SafeArea[];
  active?: boolean;
  onAreaSelect?: (area: SafeArea) => void;
}
const safeAreas: readonly SafeArea[] = [
  { id: "title", label: "Title safe area", x: 6, y: 12, width: 42, height: 34, kind: "title" },
  { id: "logo", label: "Logo safe area", x: 76, y: 8, width: 18, height: 18, kind: "logo" },
  { id: "crop", label: "Mobile crop", x: 30, y: 0, width: 40, height: 100, kind: "crop" }
];
export function SafeTextAreaOverlay({
  active = true,
  areas = safeAreas,
  className,
  imageAlt = "Campaign visual",
  imageSrc,
  onAreaSelect,
  ...props
}: SafeTextAreaOverlayProps) {
  return (
    <div className={cn("amro-safe-overlay", className)} {...props}>
      <header>
        <span>
          <strong>Placement guides</strong>
          <small>Titles, logos, and platform crops</small>
        </span>
        <StatusIndicator
          label={active ? "Guides on" : "Guides off"}
          status={active ? "active" : "idle"}
        />
      </header>
      <div>
        {imageSrc ? (
          <img alt={imageAlt} src={imageSrc} />
        ) : (
          <span className="amro-safe-overlay__art">
            <Sparkles aria-hidden="true" />
          </span>
        )}
        {active &&
          areas.map((area) => (
            <button
              data-kind={area.kind}
              key={area.id}
              onClick={() => onAreaSelect?.(area)}
              style={{
                left: `${area.x}%`,
                top: `${area.y}%`,
                width: `${area.width}%`,
                height: `${area.height}%`
              }}
              type="button"
            >
              <span>
                {area.kind === "title" ? (
                  <Type aria-hidden="true" />
                ) : area.kind === "logo" ? (
                  <ShieldCheck aria-hidden="true" />
                ) : (
                  <Crop aria-hidden="true" />
                )}
                {area.label}
              </span>
            </button>
          ))}
      </div>
    </div>
  );
}

export interface CampaignCrop {
  id: string;
  label: ReactNode;
  width: number;
  height: number;
  status?: "ready" | "generating" | "needs-review";
  src?: string;
}
export interface CampaignCropSetProps extends HTMLAttributes<HTMLDivElement> {
  sourceLabel?: ReactNode;
  crops?: readonly CampaignCrop[];
  onGenerate?: () => void;
  onOpen?: (crop: CampaignCrop) => void;
}
const campaignCrops: readonly CampaignCrop[] = [
  { id: "linkedin", label: "LinkedIn feed", width: 1200, height: 628, status: "ready" },
  { id: "instagram", label: "Instagram", width: 1080, height: 1080, status: "ready" },
  { id: "story", label: "Story", width: 1080, height: 1920, status: "needs-review" },
  { id: "hero", label: "Website hero", width: 2000, height: 900, status: "generating" }
];
export function CampaignCropSet({
  className,
  crops = campaignCrops,
  onGenerate,
  onOpen,
  sourceLabel = "Governed AI launch hero",
  ...props
}: CampaignCropSetProps) {
  return (
    <div className={cn("amro-crop-set", className)} {...props}>
      <header>
        <span>
          <strong>Campaign crop set</strong>
          <small>Source: {sourceLabel}</small>
        </span>
        {onGenerate && (
          <Button onClick={onGenerate} size="sm">
            <Crop aria-hidden="true" />
            Generate all crops
          </Button>
        )}
      </header>
      <div>
        {crops.map((crop, index) => (
          <button key={crop.id} onClick={() => onOpen?.(crop)} type="button">
            <span
              className="amro-crop-set__preview"
              data-variant={index}
              style={{ aspectRatio: crop.width / crop.height }}
            >
              <Crop aria-hidden="true" />
            </span>
            <span>
              <strong>{crop.label}</strong>
              <small>
                {crop.width} × {crop.height}
              </small>
            </span>
            <StatusIndicator
              label={crop.status ?? "ready"}
              status={
                crop.status === "ready"
                  ? "success"
                  : crop.status === "generating"
                    ? "loading"
                    : "warning"
              }
            />
          </button>
        ))}
      </div>
    </div>
  );
}

export interface AssetGalleryCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  asset?: GeneratedImageAsset;
  createdAt?: ReactNode;
  selected?: boolean;
  favourite?: boolean;
  onOpen?: (asset: GeneratedImageAsset) => void;
  onSelect?: (asset: GeneratedImageAsset, selected: boolean) => void;
  onFavourite?: (asset: GeneratedImageAsset, favourite: boolean) => void;
}
export function AssetGalleryCard({
  asset = sampleGeneratedAsset,
  className,
  createdAt = "4 min ago",
  favourite = false,
  onFavourite,
  onOpen,
  onSelect,
  selected = false,
  ...props
}: AssetGalleryCardProps) {
  return (
    <Card
      className={cn(
        "amro-asset-gallery-card",
        selected && "amro-asset-gallery-card--selected",
        className
      )}
      {...props}
    >
      <div className="amro-asset-gallery-card__preview">
        <button
          aria-label={`Open ${asset.alt ?? "asset"}`}
          className="amro-asset-gallery-card__open"
          onClick={() => onOpen?.(asset)}
          type="button"
        >
          {asset.src ? (
            <img alt={asset.alt ?? "Generated asset"} src={asset.src} />
          ) : (
            <span>
              <Sparkles aria-hidden="true" />
            </span>
          )}
        </button>
        <span>
          <label>
            <input
              aria-label="Select asset"
              checked={selected}
              onChange={(event) => onSelect?.(asset, event.target.checked)}
              type="checkbox"
            />
          </label>
          <button
            aria-label={favourite ? "Remove favourite" : "Add favourite"}
            onClick={() => onFavourite?.(asset, !favourite)}
            type="button"
          >
            <FolderHeart aria-hidden="true" />
          </button>
        </span>
      </div>
      <div>
        <span>
          <strong>{asset.alt ?? "Generated campaign asset"}</strong>
          <small>
            {asset.width} × {asset.height} · {asset.provider}
          </small>
        </span>
        <Badge tone="neutral">{createdAt}</Badge>
      </div>
      <p>{asset.prompt}</p>
    </Card>
  );
}

export interface DurableAssetBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "onCopy"> {
  stored?: boolean;
  url?: string;
  provider?: ReactNode;
  onCopy?: (url: string) => void;
}
export function DurableAssetBadge({
  className,
  onCopy,
  provider = "Amro storage",
  stored = true,
  url = "https://assets.amro.ai/a/vis-1842",
  ...props
}: DurableAssetBadgeProps) {
  return (
    <span className={cn("amro-durable-asset-badge", className)} {...props}>
      <Cloud aria-hidden="true" />
      <span>
        <strong>{stored ? "Durable asset" : "Storage pending"}</strong>
        <small>{stored ? provider : "Waiting for durable URL"}</small>
      </span>
      {stored && (
        <button aria-label="Copy asset URL" onClick={() => onCopy?.(url)} type="button">
          <Copy aria-hidden="true" />
        </button>
      )}
    </span>
  );
}

export interface AssetMetadata {
  id: string;
  createdAt: ReactNode;
  dimensions: ReactNode;
  provider: ReactNode;
  model?: ReactNode;
  seed?: ReactNode;
  format?: ReactNode;
  size?: ReactNode;
}
export interface AssetDetailDrawerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  open?: boolean;
  title?: ReactNode;
  asset?: GeneratedImageAsset;
  metadata?: AssetMetadata;
  variants?: readonly ImageVariant[];
  promptHistory?: readonly string[];
  onClose?: () => void;
  onDownload?: (asset: GeneratedImageAsset) => void;
}
const assetMetadata: AssetMetadata = {
  id: "vis-1842",
  createdAt: "5 August 2026, 14:42",
  dimensions: "1600 × 900",
  provider: "Amro Render Pro",
  model: "ARP-3",
  seed: "847291",
  format: "PNG",
  size: "2.8 MB"
};
export function AssetDetailDrawer({
  asset = sampleGeneratedAsset,
  className,
  metadata = assetMetadata,
  onClose,
  onDownload,
  open = true,
  promptHistory = [
    "Governed AI workspace",
    "Add visible approval checkpoint",
    "Increase negative space for headline"
  ],
  title = "Asset details",
  variants = imageVariants.slice(0, 3),
  ...props
}: AssetDetailDrawerProps) {
  const [tab, setTab] = useState<"details" | "prompt" | "variants">("details");
  if (!open) return null;
  return (
    <aside
      className={cn("amro-asset-detail", className)}
      aria-label={getAccessibleText(title, "Asset details")}
      {...props}
    >
      <header>
        <span>
          <strong>{title}</strong>
          <small>{asset.alt}</small>
        </span>
        {onClose && (
          <button aria-label="Close asset details" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <div className="amro-asset-detail__preview">
        {asset.src ? (
          <img alt={asset.alt ?? "Asset"} src={asset.src} />
        ) : (
          <Sparkles aria-hidden="true" />
        )}
      </div>
      <div role="tablist">
        {(["details", "prompt", "variants"] as const).map((item) => (
          <button
            aria-selected={tab === item}
            key={item}
            onClick={() => setTab(item)}
            role="tab"
            type="button"
          >
            {item}
          </button>
        ))}
      </div>
      <div className="amro-asset-detail__body">
        {tab === "details" && (
          <dl>
            {Object.entries(metadata).map(([key, value]) => (
              <div key={key}>
                <dt>{key}</dt>
                <dd>{value}</dd>
              </div>
            ))}
          </dl>
        )}
        {tab === "prompt" && (
          <ol>
            {promptHistory.map((prompt, index) => (
              <li key={prompt}>
                <Badge tone="neutral">v{index + 1}</Badge>
                {prompt}
              </li>
            ))}
          </ol>
        )}
        {tab === "variants" && (
          <div>
            {variants.map((variant, index) => (
              <span data-variant={index} key={variant.id}>
                <Sparkles aria-hidden="true" />
                <small>{variant.label}</small>
              </span>
            ))}
          </div>
        )}
      </div>
      {onDownload && (
        <footer>
          <Button onClick={() => onDownload(asset)}>
            <Download aria-hidden="true" />
            Download asset
          </Button>
        </footer>
      )}
    </aside>
  );
}

export interface AssetVersion {
  id: string;
  label: ReactNode;
  parentId?: string;
  createdAt: ReactNode;
  kind: "original" | "edited" | "regenerated";
  selected?: boolean;
}
export interface AssetVersionStackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  versions?: readonly AssetVersion[];
  onSelect?: (version: AssetVersion) => void;
  onCompare?: (version: AssetVersion) => void;
}
const assetVersions: readonly AssetVersion[] = [
  { id: "v1", label: "Original generation", createdAt: "14:42", kind: "original" },
  { id: "v2", label: "Stronger brand", parentId: "v1", createdAt: "14:49", kind: "regenerated" },
  {
    id: "v3",
    label: "Manual crop adjustment",
    parentId: "v2",
    createdAt: "14:53",
    kind: "edited",
    selected: true
  }
];
export function AssetVersionStack({
  className,
  onCompare,
  onSelect,
  versions = assetVersions,
  ...props
}: AssetVersionStackProps) {
  return (
    <div className={cn("amro-version-stack", className)} {...props}>
      <header>
        <span>
          <strong>Asset versions</strong>
          <small>Original and descendants stay recoverable</small>
        </span>
        <Badge tone="neutral">{versions.length}</Badge>
      </header>
      <ol>
        {versions.map((version, index) => (
          <li data-kind={version.kind} key={version.id}>
            <span className="amro-version-stack__thumb" data-variant={index}>
              <Layers3 aria-hidden="true" />
            </span>
            <span>
              <strong>{version.label}</strong>
              <small>
                {version.kind} · {version.createdAt}
                {version.parentId ? ` · from ${version.parentId}` : ""}
              </small>
            </span>
            {version.selected ? (
              <Badge tone="success">Current</Badge>
            ) : (
              <div>
                {onCompare && (
                  <Button onClick={() => onCompare(version)} size="sm" variant="tertiary">
                    Compare
                  </Button>
                )}
                {onSelect && (
                  <Button onClick={() => onSelect(version)} size="sm" variant="secondary">
                    Restore
                  </Button>
                )}
              </div>
            )}
          </li>
        ))}
      </ol>
    </div>
  );
}

export interface PromptHistoryItem {
  id: string;
  prompt: ReactNode;
  seed?: ReactNode;
  provider?: ReactNode;
  createdAt: ReactNode;
  resultCount?: number;
  current?: boolean;
}
export interface PromptHistoryTimelineProps extends HTMLAttributes<HTMLOListElement> {
  items?: readonly PromptHistoryItem[];
  onRestore?: (item: PromptHistoryItem) => void;
}
const promptHistoryItems: readonly PromptHistoryItem[] = [
  {
    id: "p3",
    prompt: "Increase negative space and strengthen brand lighting",
    seed: "847291",
    provider: "Amro Render Pro",
    createdAt: "14:49",
    resultCount: 4,
    current: true
  },
  {
    id: "p2",
    prompt: "Add a visible human approval checkpoint",
    seed: "847291",
    provider: "Amro Render Pro",
    createdAt: "14:44",
    resultCount: 4
  },
  {
    id: "p1",
    prompt: "Governed AI operations workspace",
    seed: "398104",
    provider: "Vision Studio",
    createdAt: "14:38",
    resultCount: 4
  }
];
export function PromptHistoryTimeline({
  className,
  items = promptHistoryItems,
  onRestore,
  ...props
}: PromptHistoryTimelineProps) {
  return (
    <ol className={cn("amro-prompt-history", className)} {...props}>
      {items.map((item) => (
        <li key={item.id}>
          <span>
            <History aria-hidden="true" />
          </span>
          <span>
            <strong>{item.prompt}</strong>
            <small>
              {item.createdAt} · seed {item.seed} · {item.provider} · {item.resultCount} results
            </small>
          </span>
          {item.current ? (
            <Badge tone="success">Current</Badge>
          ) : (
            onRestore && (
              <Button onClick={() => onRestore(item)} size="sm" variant="secondary">
                Restore prompt
              </Button>
            )
          )}
        </li>
      ))}
    </ol>
  );
}

export interface FavouriteCollectionCardProps extends HTMLAttributes<HTMLDivElement> {
  name?: ReactNode;
  client?: ReactNode;
  campaign?: ReactNode;
  assets?: readonly GeneratedImageAsset[];
  updatedAt?: ReactNode;
  onOpen?: () => void;
  onAdd?: () => void;
}
export function FavouriteCollectionCard({
  assets = imageVariants.slice(0, 4),
  campaign = "Governed AI launch",
  className,
  client = "Amro",
  name = "Launch selects",
  onAdd,
  onOpen,
  updatedAt = "Updated today",
  ...props
}: FavouriteCollectionCardProps) {
  return (
    <Card className={cn("amro-favourite-collection", className)} {...props}>
      <div className="amro-favourite-collection__mosaic">
        {assets.slice(0, 4).map((asset, index) => (
          <span data-variant={index} key={asset.id}>
            {asset.src ? <img alt="" src={asset.src} /> : <Sparkles aria-hidden="true" />}
          </span>
        ))}
      </div>
      <header>
        <span>
          <strong>{name}</strong>
          <small>
            {client} · {campaign}
          </small>
        </span>
        <Badge tone="neutral">{assets.length} assets</Badge>
      </header>
      <footer>
        <small>{updatedAt}</small>
        <div>
          {onAdd && (
            <Button onClick={onAdd} size="sm" variant="tertiary">
              Add assets
            </Button>
          )}
          {onOpen && (
            <Button onClick={onOpen} size="sm" variant="secondary">
              Open collection
            </Button>
          )}
        </div>
      </footer>
    </Card>
  );
}

export interface AssetUsage {
  id: string;
  product: ReactNode;
  campaign: ReactNode;
  placement: ReactNode;
  status?: "active" | "scheduled" | "archived";
  usedAt?: ReactNode;
}
export interface AssetUsageTrackerProps extends HTMLAttributes<HTMLDivElement> {
  usages?: readonly AssetUsage[];
  onOpen?: (usage: AssetUsage) => void;
}
const assetUsages: readonly AssetUsage[] = [
  {
    id: "web",
    product: "AmroAgents",
    campaign: "Governed AI launch",
    placement: "Homepage hero",
    status: "active",
    usedAt: "Live now"
  },
  {
    id: "linkedin",
    product: "AmroGen",
    campaign: "Q3 outreach",
    placement: "LinkedIn creative",
    status: "scheduled",
    usedAt: "12 Aug"
  },
  {
    id: "deck",
    product: "AmroUI",
    campaign: "Sales enablement",
    placement: "Presentation slide 4",
    status: "active",
    usedAt: "5 Aug"
  }
];
export function AssetUsageTracker({
  className,
  onOpen,
  usages = assetUsages,
  ...props
}: AssetUsageTrackerProps) {
  const active = usages.filter((usage) => usage.status === "active").length;
  return (
    <FeaturePanel
      className={cn("amro-asset-usage", className)}
      eyebrow="Asset usage"
      title={`${usages.length} placements`}
      description={`${active} currently live`}
      status={<Badge tone="success">Rights tracked</Badge>}
      {...props}
    >
      <ul>
        {usages.map((usage) => (
          <li key={usage.id}>
            <span>
              <strong>{usage.product}</strong>
              <small>
                {usage.campaign} · {usage.placement}
              </small>
            </span>
            <StatusIndicator
              label={usage.status ?? "active"}
              status={
                usage.status === "active"
                  ? "online"
                  : usage.status === "scheduled"
                    ? "pending"
                    : "idle"
              }
            />
            <time>{usage.usedAt}</time>
            {onOpen && (
              <button
                aria-label={`Open ${getAccessibleText(usage.placement, "asset usage")}`}
                onClick={() => onOpen(usage)}
                type="button"
              >
                <ExternalLink aria-hidden="true" />
              </button>
            )}
          </li>
        ))}
      </ul>
    </FeaturePanel>
  );
}

export type DownloadFormat = "original" | "compressed" | "transparent" | "platform";
export interface DownloadFormatOption {
  id: DownloadFormat;
  label: ReactNode;
  detail: ReactNode;
  format: ReactNode;
  size?: ReactNode;
  available?: boolean;
}
export interface DownloadFormatMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  open?: boolean;
  formats?: readonly DownloadFormatOption[];
  onSelect?: (format: DownloadFormatOption) => void;
  onClose?: () => void;
}
const downloadFormats: readonly DownloadFormatOption[] = [
  {
    id: "original",
    label: "Original",
    detail: "Full-quality source",
    format: "PNG",
    size: "2.8 MB",
    available: true
  },
  {
    id: "compressed",
    label: "Compressed web",
    detail: "Optimised delivery",
    format: "WEBP",
    size: "420 KB",
    available: true
  },
  {
    id: "transparent",
    label: "Transparent",
    detail: "Background removed",
    format: "PNG",
    size: "1.9 MB",
    available: false
  },
  {
    id: "platform",
    label: "Platform-ready set",
    detail: "Social and ad crops",
    format: "ZIP",
    size: "8.4 MB",
    available: true
  }
];
export function DownloadFormatMenu({
  className,
  formats = downloadFormats,
  onClose,
  onSelect,
  open = true,
  ...props
}: DownloadFormatMenuProps) {
  if (!open) return null;
  return (
    <div
      className={cn("amro-download-menu", className)}
      role="menu"
      aria-label="Download formats"
      {...props}
    >
      <header>
        <span>
          <strong>Download asset</strong>
          <small>Choose a prepared format</small>
        </span>
        {onClose && (
          <button aria-label="Close download menu" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <div>
        {formats.map((format) => (
          <button
            disabled={format.available === false}
            key={format.id}
            onClick={() => onSelect?.(format)}
            role="menuitem"
            type="button"
          >
            <span>
              <Download aria-hidden="true" />
            </span>
            <span>
              <strong>{format.label}</strong>
              <small>{format.detail}</small>
            </span>
            <span>
              <strong>{format.format}</strong>
              <small>{format.size ?? (format.available === false ? "Generate first" : "")}</small>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

export interface AltTextGeneratorProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
  assetAlt?: string;
  generated?: boolean;
  confidence?: number;
  onGenerate?: () => void;
  onSubmit?: (altText: string) => void;
}
export function AltTextGenerator({
  assetAlt = "A product interface showing an AI workflow paused at a human approval checkpoint, lit with teal and cyan accents.",
  className,
  confidence = 94,
  generated = true,
  onGenerate,
  onSubmit,
  ...props
}: AltTextGeneratorProps) {
  const [text, setText] = useState(assetAlt);
  return (
    <form
      className={cn("amro-alt-generator", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (text.trim()) onSubmit?.(text);
      }}
      {...props}
    >
      <header>
        <span>
          <strong>Accessibility description</strong>
          <small>Describe meaning and context, not visual decoration</small>
        </span>
        {generated && <Badge tone="success">{confidence}% confidence</Badge>}
      </header>
      <div className="amro-alt-generator__asset">
        <ImageIcon aria-hidden="true" />
      </div>
      <label>
        <span>Alt text</span>
        <Textarea onChange={(event) => setText(event.target.value)} value={text} />
        <small>{text.length} characters</small>
      </label>
      <footer>
        {onGenerate && (
          <Button onClick={onGenerate} variant="secondary">
            <Sparkles aria-hidden="true" />
            Regenerate
          </Button>
        )}
        <Button disabled={!text.trim()} type="submit">
          Save alt text
        </Button>
      </footer>
    </form>
  );
}

export interface CreditCostItem {
  id: string;
  label: ReactNode;
  quantity: number;
  unitCost: number;
}
export interface CreditCostPreviewProps extends HTMLAttributes<HTMLDivElement> {
  items?: readonly CreditCostItem[];
  balance?: number;
  onGenerate?: () => void;
}
const creditCostItems: readonly CreditCostItem[] = [
  { id: "base", label: "Image generation", quantity: 4, unitCost: 18 },
  { id: "enhance", label: "Prompt enhancement", quantity: 1, unitCost: 4 },
  { id: "store", label: "Durable storage", quantity: 4, unitCost: 2 }
];
export function CreditCostPreview({
  balance = 240,
  className,
  items = creditCostItems,
  onGenerate,
  ...props
}: CreditCostPreviewProps) {
  const total = items.reduce((sum, item) => sum + item.quantity * item.unitCost, 0);
  const enough = balance >= total;
  return (
    <FeaturePanel
      className={cn("amro-credit-cost", className)}
      eyebrow="Generation cost"
      title={`${total} credits`}
      description={`${balance} available`}
      status={
        <StatusIndicator
          label={enough ? "Within balance" : "Insufficient credits"}
          status={enough ? "success" : "blocked"}
        />
      }
      {...props}
    >
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <span>
              {item.label}
              <small>
                {item.quantity} × {item.unitCost}
              </small>
            </span>
            <strong>{item.quantity * item.unitCost}</strong>
          </li>
        ))}
      </ul>
      <footer>
        <span>
          Remaining after generation <strong>{Math.max(0, balance - total)}</strong>
        </span>
        {onGenerate && (
          <Button disabled={!enough} onClick={onGenerate}>
            Generate {items[0]?.quantity ?? 1} variants
          </Button>
        )}
      </footer>
    </FeaturePanel>
  );
}

export interface CreditConsumptionReceiptProps extends HTMLAttributes<HTMLDivElement> {
  provider?: ReactNode;
  assetCount?: number;
  generationCost?: number;
  storageCost?: number;
  total?: number;
  transactionId?: ReactNode;
  createdAt?: ReactNode;
}
export function CreditConsumptionReceipt({
  assetCount = 4,
  className,
  createdAt = "5 August 2026, 14:42",
  generationCost = 76,
  provider = "Amro Render Pro",
  storageCost = 8,
  total = 84,
  transactionId = "cr_9Q8M42",
  ...props
}: CreditConsumptionReceiptProps) {
  return (
    <Card className={cn("amro-credit-receipt", className)} {...props}>
      <header>
        <span>
          <Check aria-hidden="true" />
        </span>
        <span>
          <strong>Generation complete</strong>
          <small>{assetCount} durable assets created</small>
        </span>
        <strong>−{total}</strong>
      </header>
      <dl>
        <div>
          <dt>Provider</dt>
          <dd>{provider}</dd>
        </div>
        <div>
          <dt>Generation</dt>
          <dd>{generationCost} credits</dd>
        </div>
        <div>
          <dt>Storage</dt>
          <dd>{storageCost} credits</dd>
        </div>
        <div>
          <dt>Total</dt>
          <dd>{total} credits</dd>
        </div>
      </dl>
      <footer>
        <span>
          {transactionId} · {createdAt}
        </span>
        <Badge tone="success">Exact cost</Badge>
      </footer>
    </Card>
  );
}

export interface APIAssetCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
  asset?: GeneratedImageAsset;
  url?: string;
  apiId?: string;
  contentType?: ReactNode;
  expires?: ReactNode;
  onCopy?: (value: string) => void;
  onOpen?: () => void;
}
export function APIAssetCard({
  apiId = "asset_vis_1842",
  asset = sampleGeneratedAsset,
  className,
  contentType = "image/png",
  expires = "No expiry",
  onCopy,
  onOpen,
  url = "https://assets.amro.ai/v1/asset_vis_1842.png",
  ...props
}: APIAssetCardProps) {
  return (
    <Card className={cn("amro-api-asset", className)} {...props}>
      <header>
        <span>
          <Server aria-hidden="true" />
        </span>
        <span>
          <span className="amro-eyebrow">API-ready asset</span>
          <strong>{asset.alt}</strong>
          <small>
            {apiId} · {contentType} · {expires}
          </small>
        </span>
        <DurableAssetBadge url={url} />
      </header>
      <div>
        <code>{url}</code>
        <Button
          aria-label="Copy durable asset URL"
          onClick={() => onCopy?.(url)}
          size="sm"
          variant="secondary"
        >
          <Copy aria-hidden="true" />
        </Button>
      </div>
      <dl>
        <div>
          <dt>Width</dt>
          <dd>{asset.width}</dd>
        </div>
        <div>
          <dt>Height</dt>
          <dd>{asset.height}</dd>
        </div>
        <div>
          <dt>Provider</dt>
          <dd>{asset.provider}</dd>
        </div>
      </dl>
      {onOpen && (
        <Button onClick={onOpen} variant="tertiary">
          Open API metadata
          <Code2 aria-hidden="true" />
        </Button>
      )}
    </Card>
  );
}

export interface ContentSafetyExplanationProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "title"
> {
  title?: ReactNode;
  category?: ReactNode;
  explanation?: ReactNode;
  safeAlternatives?: readonly ReactNode[];
  onUseAlternative?: (alternative: ReactNode) => void;
  onEditPrompt?: () => void;
}
export function ContentSafetyExplanation({
  category = "Identity misuse",
  className,
  explanation = "This request appears to place a recognisable person in a misleading commercial scene. AmroVisionAI will not generate deceptive identity content.",
  onEditPrompt,
  onUseAlternative,
  safeAlternatives = [
    "Use a fictional professional with no resemblance to a real person",
    "Create an abstract product-led campaign visual",
    "Use an approved brand spokesperson reference"
  ],
  title = "This image cannot be generated as written",
  ...props
}: ContentSafetyExplanationProps) {
  return (
    <div className={cn("amro-safety-explanation", className)} role="alert" {...props}>
      <header>
        <ShieldCheck aria-hidden="true" />
        <span>
          <span className="amro-eyebrow">Generation blocked · {category}</span>
          <strong>{title}</strong>
          <p>{explanation}</p>
        </span>
      </header>
      <section>
        <strong>Safe ways to continue</strong>
        {safeAlternatives.map((alternative, index) => (
          <button key={index} onClick={() => onUseAlternative?.(alternative)} type="button">
            <Check aria-hidden="true" />
            <span>{alternative}</span>
            <ChevronRight aria-hidden="true" />
          </button>
        ))}
      </section>
      {onEditPrompt && (
        <footer>
          <Button onClick={onEditPrompt}>Edit prompt</Button>
        </footer>
      )}
    </div>
  );
}

export interface StarterPrompt {
  id: string;
  category: ReactNode;
  title: ReactNode;
  prompt: string;
}
export interface EmptyGalleryStarterProps extends HTMLAttributes<HTMLDivElement> {
  prompts?: readonly StarterPrompt[];
  categories?: readonly ReactNode[];
  onSelectPrompt?: (prompt: StarterPrompt) => void;
  onStartBlank?: () => void;
}
const starterPrompts: readonly StarterPrompt[] = [
  {
    id: "hero",
    category: "Product hero",
    title: "Outcome-led product story",
    prompt:
      "Premium editorial hero showing a real team using governed AI to complete a measurable business outcome"
  },
  {
    id: "campaign",
    category: "Campaign",
    title: "Multi-channel launch visual",
    prompt:
      "Flexible campaign composition with strong subject focus and safe text areas for social crops"
  },
  {
    id: "article",
    category: "Editorial",
    title: "Concept illustration",
    prompt:
      "Clear editorial metaphor explaining a complex AI governance concept without robots or sci-fi clichés"
  }
];
export function EmptyGalleryStarter({
  categories = ["Product", "Campaign", "Editorial", "Social"],
  className,
  onSelectPrompt,
  onStartBlank,
  prompts = starterPrompts,
  ...props
}: EmptyGalleryStarterProps) {
  return (
    <div className={cn("amro-empty-gallery", className)} {...props}>
      <header>
        <span>
          <ImageIcon aria-hidden="true" />
        </span>
        <h2>Create your first durable visual</h2>
        <p>Start with a production-ready example or build a prompt from scratch.</p>
        {onStartBlank && (
          <Button onClick={onStartBlank}>
            Start from a blank prompt
            <Sparkles aria-hidden="true" />
          </Button>
        )}
      </header>
      <div className="amro-empty-gallery__categories">
        {categories.map((category, index) => (
          <Badge key={index} tone="neutral">
            {category}
          </Badge>
        ))}
      </div>
      <div>
        {prompts.map((prompt, index) => (
          <button
            data-variant={index}
            key={prompt.id}
            onClick={() => onSelectPrompt?.(prompt)}
            type="button"
          >
            <span>
              <Sparkles aria-hidden="true" />
            </span>
            <span>
              <Badge tone="neutral">{prompt.category}</Badge>
              <strong>{prompt.title}</strong>
              <small>{prompt.prompt}</small>
            </span>
            <ChevronRight aria-hidden="true" />
          </button>
        ))}
      </div>
    </div>
  );
}
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-learning.md

Installable AmroUI product component source.

# AmroUI learning

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-learning.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-learning.json)

## Source

### source/components/learning.tsx

```tsx
import {
  Award,
  BookOpen,
  Brain,
  Building2,
  CalendarDays,
  Car,
  Check,
  ChevronRight,
  CircleHelp,
  Clock3,
  Download,
  Flame,
  Footprints,
  GraduationCap,
  Headphones,
  Languages,
  Lightbulb,
  LockKeyhole,
  MessageCircle,
  Mic,
  Pause,
  Play,
  RotateCcw,
  Share2,
  ShieldCheck,
  Sparkles,
  Target,
  Trash2,
  UserCog,
  Users,
  Volume2,
  X
} from "lucide-react";
import { useState, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Avatar } from "./avatar.js";
import { Badge } from "./badge.js";
import { Button, type ButtonProps } from "./button.js";
import { Card } from "./card.js";
import { EmptyNotice, FeaturePanel, StatusIndicator } from "./feature-primitives.js";
import { DateInput, Input, RangeInput, Select } from "./input.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export type VoiceTutorState = "idle" | "listening" | "thinking" | "speaking" | "paused" | "error";
export interface VoiceTutorOrbProps extends HTMLAttributes<HTMLDivElement> {
  state?: VoiceTutorState;
  tutorName?: ReactNode;
  level?: number;
  label?: ReactNode;
}
export function VoiceTutorOrb({
  className,
  label,
  level = 0.64,
  state = "listening",
  tutorName = "Amro Tutor",
  ...props
}: VoiceTutorOrbProps) {
  return (
    <div
      className={cn("amro-voice-tutor-orb", `amro-voice-tutor-orb--${state}`, className)}
      role="status"
      aria-label={`${getAccessibleText(tutorName, "Tutor")} is ${state}`}
      style={{ "--amro-wave-level": Math.max(0, Math.min(level, 1)) } as CSSProperties}
      {...props}
    >
      <div>
        <span aria-hidden="true" />
        <span aria-hidden="true" />
        <span aria-hidden="true" />
        <Mic aria-hidden="true" />
      </div>
      <strong>
        {label ??
          (state === "listening"
            ? "Listening…"
            : state === "thinking"
              ? "Thinking…"
              : state === "speaking"
                ? "Explaining…"
                : state)}
      </strong>
      <small>{tutorName}</small>
    </div>
  );
}

export interface VoiceLessonPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  section?: ReactNode;
  duration?: number;
  currentTime?: number;
  playing?: boolean;
  speed?: number;
  waveform?: readonly number[];
  transcriptVisible?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  onSeek?: (seconds: number) => void;
  onSpeedChange?: (speed: number) => void;
  onTranscriptToggle?: () => void;
}
const lessonWave = [
  24, 42, 68, 36, 76, 54, 82, 46, 64, 38, 72, 58, 88, 52, 66, 40, 76, 48, 62, 34, 56, 30, 48, 26
];
function formatTime(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  return `${minutes}:${Math.floor(seconds % 60)
    .toString()
    .padStart(2, "0")}`;
}
export function VoiceLessonPlayer({
  className,
  currentTime = 224,
  duration = 780,
  onPlayingChange,
  onSeek,
  onSpeedChange,
  onTranscriptToggle,
  playing = true,
  section = "The human approval boundary",
  speed = 1,
  title = "Governed AI agents",
  transcriptVisible = true,
  waveform = lessonWave,
  ...props
}: VoiceLessonPlayerProps) {
  return (
    <div className={cn("amro-voice-lesson", className)} {...props}>
      <header>
        <span>
          <span className="amro-eyebrow">Now learning</span>
          <strong>{title}</strong>
          <small>{section}</small>
        </span>
        <Badge tone="info">
          <Headphones aria-hidden="true" />
          Audio lesson
        </Badge>
      </header>
      <div className="amro-voice-lesson__transport">
        <button
          aria-label={playing ? "Pause lesson" : "Play lesson"}
          onClick={() => onPlayingChange?.(!playing)}
          type="button"
        >
          {playing ? <Pause aria-hidden="true" /> : <Play aria-hidden="true" />}
        </button>
        <div className="amro-voice-lesson__wave" aria-hidden="true">
          {waveform.map((height, index) => (
            <i
              data-played={index / waveform.length <= currentTime / duration}
              key={index}
              style={{ height: `${height}%` }}
            />
          ))}
        </div>
        <span>
          {formatTime(currentTime)} / {formatTime(duration)}
        </span>
      </div>
      <RangeInput
        aria-label="Lesson position"
        max={duration}
        min="0"
        onChange={(event) => onSeek?.(Number(event.target.value))}
        value={currentTime}
      />
      <footer>
        <button aria-pressed={transcriptVisible} onClick={onTranscriptToggle} type="button">
          <BookOpen aria-hidden="true" />
          Transcript
        </button>
        <label>
          <Volume2 aria-hidden="true" />
          <span className="amro-sr-only">Playback speed</span>
          <Select onChange={(event) => onSpeedChange?.(Number(event.target.value))} value={speed}>
            {[0.75, 1, 1.25, 1.5, 2].map((value) => (
              <option key={value} value={value}>
                {value}×
              </option>
            ))}
          </Select>
        </label>
      </footer>
    </div>
  );
}

export interface TranscriptSegment {
  id: string;
  text: string;
  start: number;
  end: number;
  speaker?: ReactNode;
}
export interface SyncedTranscriptProps extends HTMLAttributes<HTMLDivElement> {
  segments?: readonly TranscriptSegment[];
  currentTime?: number;
  mode?: "sentence" | "word";
  onSeek?: (seconds: number) => void;
}
const transcriptSegments: readonly TranscriptSegment[] = [
  {
    id: "one",
    text: "A governed AI agent can complete useful work without hiding how it reached an outcome.",
    start: 0,
    end: 8,
    speaker: "Tutor"
  },
  {
    id: "two",
    text: "The key design choice is where the agent must stop and ask a person to decide.",
    start: 8,
    end: 17,
    speaker: "Tutor"
  },
  {
    id: "three",
    text: "That pause is the human approval boundary.",
    start: 17,
    end: 22,
    speaker: "Tutor"
  }
];
export function SyncedTranscript({
  className,
  currentTime = 10,
  mode = "sentence",
  onSeek,
  segments = transcriptSegments,
  ...props
}: SyncedTranscriptProps) {
  return (
    <div className={cn("amro-synced-transcript", className)} data-mode={mode} {...props}>
      <header>
        <span>
          <strong>Transcript</strong>
          <small>{mode} highlighting</small>
        </span>
        <Badge tone="neutral">Synced</Badge>
      </header>
      <ol>
        {segments.map((segment) => {
          const active = currentTime >= segment.start && currentTime < segment.end;
          return (
            <li data-active={active} key={segment.id}>
              <button
                aria-current={active ? "true" : undefined}
                onClick={() => onSeek?.(segment.start)}
                type="button"
              >
                <time>{formatTime(segment.start)}</time>
                <span>
                  <small>{segment.speaker}</small>
                  <span>
                    {mode === "word" && active
                      ? segment.text.split(" ").map((word, index) => (
                          <mark
                            data-active={
                              index ===
                              Math.floor(
                                ((currentTime - segment.start) /
                                  Math.max(1, segment.end - segment.start)) *
                                  segment.text.split(" ").length
                              )
                            }
                            key={`${word}-${index}`}
                          >
                            {word}{" "}
                          </mark>
                        ))
                      : segment.text}
                  </span>
                </span>
              </button>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

export interface AskTutorButtonProps extends ButtonProps {
  listening?: boolean;
  playbackActive?: boolean;
}
export function AskTutorButton({
  children,
  className,
  listening = false,
  playbackActive = true,
  ...props
}: AskTutorButtonProps) {
  return (
    <Button
      className={cn("amro-ask-tutor", listening && "amro-ask-tutor--listening", className)}
      {...props}
    >
      {listening ? (
        <>
          <span className="amro-ask-tutor__pulse" aria-hidden="true" />
          <Mic aria-hidden="true" />
          Listening—ask your question
        </>
      ) : (
        <>
          <MessageCircle aria-hidden="true" />
          {children ?? (playbackActive ? "Pause and ask tutor" : "Ask tutor")}
        </>
      )}
    </Button>
  );
}

export interface TutorTurn {
  id: string;
  role: "tutor" | "learner";
  content: ReactNode;
  timestamp?: ReactNode;
  lessonContext?: ReactNode;
}
export interface TutorConversationPanelProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onSubmit"
> {
  turns?: readonly TutorTurn[];
  tutorName?: string;
  onSubmit?: (question: string) => void;
  onClose?: () => void;
}
const tutorTurns: readonly TutorTurn[] = [
  {
    id: "t1",
    role: "tutor",
    content: "A control boundary is the point where an agent pauses before an external action.",
    lessonContext: "Section 3 · Governance"
  },
  { id: "q1", role: "learner", content: "Does every email need approval?" },
  {
    id: "t2",
    role: "tutor",
    content:
      "Not necessarily. A team can pre-approve a narrow rule set, but anything outside it should pause."
  }
];
export function TutorConversationPanel({
  className,
  onClose,
  onSubmit,
  turns = tutorTurns,
  tutorName = "Amro Tutor",
  ...props
}: TutorConversationPanelProps) {
  const [draft, setDraft] = useState("");
  return (
    <div className={cn("amro-tutor-conversation", className)} {...props}>
      <header>
        <Avatar name={tutorName} />
        <span>
          <strong>{tutorName}</strong>
          <small>Grounded in this lesson</small>
        </span>
        <StatusIndicator label="Voice ready" status="online" />
        {onClose && (
          <button aria-label="Close tutor conversation" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <div role="log" aria-label="Tutor conversation">
        {turns.map((turn) => (
          <article data-role={turn.role} key={turn.id}>
            <small>
              {turn.role === "tutor" ? tutorName : "You"}
              {turn.lessonContext
                ? ` · ${getAccessibleText(turn.lessonContext, "lesson context")}`
                : ""}
            </small>
            <p>{turn.content}</p>
          </article>
        ))}
      </div>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          if (draft.trim()) {
            onSubmit?.(draft);
            setDraft("");
          }
        }}
      >
        <input
          aria-label="Ask tutor"
          onChange={(event) => setDraft(event.target.value)}
          placeholder="Ask about this concept…"
          value={draft}
        />
        <button aria-label="Ask by voice" type="button">
          <Mic aria-hidden="true" />
        </button>
        <Button disabled={!draft.trim()} size="sm" type="submit">
          Ask
        </Button>
      </form>
    </div>
  );
}

export interface TutorResponseCardProps extends HTMLAttributes<HTMLDivElement> {
  explanation?: ReactNode;
  example?: ReactNode;
  analogy?: ReactNode;
  sourceSection?: ReactNode;
  onExplainDifferently?: () => void;
  onGoDeeper?: () => void;
}
export function TutorResponseCard({
  analogy = "Think of it like a checkout: the cart can be prepared automatically, but payment still waits for you.",
  className,
  example = "Drafting an email is safe; sending it to 500 people crosses the control boundary.",
  explanation = "A control boundary separates preparation from a consequential action.",
  onExplainDifferently,
  onGoDeeper,
  sourceSection = "Governance · 03:44",
  ...props
}: TutorResponseCardProps) {
  const [view, setView] = useState<"explanation" | "example" | "analogy">("explanation");
  const content = view === "example" ? example : view === "analogy" ? analogy : explanation;
  return (
    <FeaturePanel
      className={cn("amro-tutor-response", className)}
      eyebrow="Tutor response"
      title={content}
      description={sourceSection}
      status={<Badge tone="success">Lesson grounded</Badge>}
      {...props}
    >
      <div role="tablist">
        {(["explanation", "example", "analogy"] as const).map((item) => (
          <button
            aria-selected={view === item}
            key={item}
            onClick={() => setView(item)}
            role="tab"
            type="button"
          >
            {item}
          </button>
        ))}
      </div>
      <footer>
        {onExplainDifferently && (
          <Button onClick={onExplainDifferently} variant="secondary">
            <RotateCcw aria-hidden="true" />
            Explain differently
          </Button>
        )}
        {onGoDeeper && (
          <Button onClick={onGoDeeper}>
            Go deeper
            <ChevronRight aria-hidden="true" />
          </Button>
        )}
      </footer>
    </FeaturePanel>
  );
}

export type UnderstandingResponse = "got-it" | "not-yet" | "deeper";
export interface UnderstandingCheckProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  prompt?: ReactNode;
  value?: UnderstandingResponse;
  onChange?: (response: UnderstandingResponse) => void;
}
export function UnderstandingCheck({
  className,
  onChange,
  prompt = "How does that explanation feel?",
  value: controlled,
  ...props
}: UnderstandingCheckProps) {
  const [internal, setInternal] = useState<UnderstandingResponse>();
  const value = controlled ?? internal;
  const options: readonly { id: UnderstandingResponse; label: string; detail: string }[] = [
    { id: "got-it", label: "Got it", detail: "Continue the lesson" },
    { id: "not-yet", label: "Not yet", detail: "Try a simpler explanation" },
    { id: "deeper", label: "Go deeper", detail: "Explore the nuance" }
  ];
  return (
    <div className={cn("amro-understanding-check", className)} {...props}>
      <strong>{prompt}</strong>
      <div>
        {options.map((option) => (
          <button
            aria-pressed={value === option.id}
            key={option.id}
            onClick={() => {
              setInternal(option.id);
              onChange?.(option.id);
            }}
            type="button"
          >
            <span>
              {option.id === "got-it" ? (
                <Check aria-hidden="true" />
              ) : option.id === "not-yet" ? (
                <CircleHelp aria-hidden="true" />
              ) : (
                <Brain aria-hidden="true" />
              )}
            </span>
            <span>
              <strong>{option.label}</strong>
              <small>{option.detail}</small>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

export interface KnowledgeChoice {
  id: string;
  label: ReactNode;
  correct?: boolean;
}
export interface KnowledgeCheckCardProps extends HTMLAttributes<HTMLDivElement> {
  question?: ReactNode;
  choices?: readonly KnowledgeChoice[];
  hint?: ReactNode;
  explanation?: ReactNode;
  onAnswer?: (choice: KnowledgeChoice, correct: boolean) => void;
}
const knowledgeChoices: readonly KnowledgeChoice[] = [
  { id: "a", label: "Whenever the agent starts researching" },
  { id: "b", label: "Before a consequential external action", correct: true },
  { id: "c", label: "Only after the action has completed" }
];
export function KnowledgeCheckCard({
  choices = knowledgeChoices,
  className,
  explanation = "The boundary belongs immediately before the consequential action, while the person can still change the outcome.",
  hint = "Think about when a decision is still reversible.",
  onAnswer,
  question = "Where should a human approval boundary appear?",
  ...props
}: KnowledgeCheckCardProps) {
  const [selected, setSelected] = useState<KnowledgeChoice>();
  const [showHint, setShowHint] = useState(false);
  const answered = selected !== undefined;
  return (
    <FeaturePanel
      className={cn("amro-knowledge-check", className)}
      eyebrow="Knowledge check"
      title={question}
      status={<Badge tone="neutral">1 concept</Badge>}
      {...props}
    >
      <div role="radiogroup" aria-label="Answers">
        {choices.map((choice) => (
          <button
            aria-checked={selected?.id === choice.id}
            data-result={
              selected?.id === choice.id ? (choice.correct ? "correct" : "incorrect") : undefined
            }
            disabled={answered}
            key={choice.id}
            onClick={() => {
              setSelected(choice);
              onAnswer?.(choice, Boolean(choice.correct));
            }}
            role="radio"
            type="button"
          >
            <span>{choice.id.toUpperCase()}</span>
            <span>{choice.label}</span>
            {selected?.id === choice.id &&
              (choice.correct ? <Check aria-hidden="true" /> : <X aria-hidden="true" />)}
          </button>
        ))}
      </div>
      {!answered && (
        <Button onClick={() => setShowHint((value) => !value)} variant="tertiary">
          <Lightbulb aria-hidden="true" />
          {showHint ? hint : "Show hint"}
        </Button>
      )}
      {answered && (
        <div className="amro-knowledge-check__explanation">
          <strong>{selected.correct ? "Correct" : "Not quite"}</strong>
          <p>{explanation}</p>
        </div>
      )}
    </FeaturePanel>
  );
}

export type ConfidenceLevel = 1 | 2 | 3 | 4 | 5;
export interface ConfidenceSelectorProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  value?: ConfidenceLevel;
  onChange?: (level: ConfidenceLevel) => void;
  prompt?: ReactNode;
}
export function ConfidenceSelector({
  className,
  onChange,
  prompt = "How confident are you with this concept?",
  value: controlled,
  ...props
}: ConfidenceSelectorProps) {
  const [internal, setInternal] = useState<ConfidenceLevel>();
  const value = controlled ?? internal;
  const labels = [
    "Need help",
    "Uncertain",
    "Getting there",
    "Confident",
    "Could teach it"
  ] as const;
  return (
    <fieldset className={cn("amro-confidence-selector", className)} {...props}>
      <legend>{prompt}</legend>
      <div>
        {labels.map((label, index) => {
          const level = (index + 1) as ConfidenceLevel;
          return (
            <label data-selected={value === level} key={label}>
              <input
                checked={value === level}
                name="confidence"
                onChange={() => {
                  setInternal(level);
                  onChange?.(level);
                }}
                type="radio"
              />
              <span>{level}</span>
              <small>{label}</small>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}

export interface LearningCompanionCardProps extends HTMLAttributes<HTMLDivElement> {
  tutor?: string;
  subject?: ReactNode;
  language?: ReactNode;
  sections?: number;
  completedSections?: number;
  durationMinutes?: number;
  onContinue?: () => void;
}
export function LearningCompanionCard({
  className,
  completedSections = 4,
  durationMinutes = 48,
  language = "English",
  onContinue,
  sections = 8,
  subject = "Governed AI agents",
  tutor = "Amro Tutor",
  ...props
}: LearningCompanionCardProps) {
  const progress = Math.round((completedSections / Math.max(1, sections)) * 100);
  return (
    <Card className={cn("amro-learning-companion", className)} {...props}>
      <header>
        <Avatar name={tutor} />
        <span>
          <span className="amro-eyebrow">Your learning companion</span>
          <strong>{tutor}</strong>
          <small>{subject}</small>
        </span>
        <StatusIndicator label="Tutor ready" status="online" />
      </header>
      <div>
        <span>
          <Languages aria-hidden="true" />
          {language}
        </span>
        <span>
          <BookOpen aria-hidden="true" />
          {completedSections}/{sections} sections
        </span>
        <span>
          <Clock3 aria-hidden="true" />
          {durationMinutes} min
        </span>
      </div>
      <progress max="100" value={progress}>
        {progress}%
      </progress>
      <footer>
        <span>
          <strong>{progress}%</strong>
          <small>Lesson progress</small>
        </span>
        {onContinue && (
          <Button onClick={onContinue}>
            Continue learning
            <Play aria-hidden="true" />
          </Button>
        )}
      </footer>
    </Card>
  );
}

export interface ProgrammeSession {
  id: string;
  title: ReactNode;
  duration?: ReactNode;
  complete?: boolean;
  locked?: boolean;
}
export interface InstructorProgrammeCardProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "title"
> {
  title?: ReactNode;
  instructor?: ReactNode;
  description?: ReactNode;
  sessions?: readonly ProgrammeSession[];
  prerequisites?: readonly ReactNode[];
  enrolled?: boolean;
  onEnroll?: () => void;
}
const programmeSessions: readonly ProgrammeSession[] = [
  { id: "one", title: "Agent foundations", duration: "35 min", complete: true },
  { id: "two", title: "Control boundaries", duration: "42 min" },
  { id: "three", title: "Outcome measurement", duration: "38 min", locked: true }
];
export function InstructorProgrammeCard({
  className,
  description = "Build practical skill in designing governed, outcome-driven AI workflows.",
  enrolled = false,
  instructor = "Dr. Maya Chen",
  onEnroll,
  prerequisites = ["Basic AI literacy"],
  sessions = programmeSessions,
  title = "Governed AI Operations",
  ...props
}: InstructorProgrammeCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-programme-card", className)}
      eyebrow="Instructor programme"
      title={title}
      description={description}
      status={
        <Badge tone={enrolled ? "success" : "neutral"}>
          {enrolled ? "Enrolled" : `${sessions.length} sessions`}
        </Badge>
      }
      {...props}
    >
      <div className="amro-programme-card__instructor">
        <Avatar name={getAccessibleText(instructor, "Instructor")} />
        <span>
          <small>Instructor</small>
          <strong>{instructor}</strong>
        </span>
      </div>
      <ol>
        {sessions.map((session, index) => (
          <li key={session.id}>
            <span>
              {session.complete ? (
                <Check aria-hidden="true" />
              ) : session.locked ? (
                <LockKeyhole aria-hidden="true" />
              ) : (
                index + 1
              )}
            </span>
            <strong>{session.title}</strong>
            <small>{session.duration}</small>
          </li>
        ))}
      </ol>
      <footer>
        <span>
          <small>Prerequisites</small>
          {prerequisites.map((item, index) => (
            <Badge key={index} tone="neutral">
              {item}
            </Badge>
          ))}
        </span>
        {!enrolled && onEnroll && <Button onClick={onEnroll}>Enrol in programme</Button>}
      </footer>
    </FeaturePanel>
  );
}

export interface CourseBrief {
  topic: string;
  audience: string;
  outcome: string;
  sections: number;
  language: string;
  audio: boolean;
  quizzes: boolean;
}
export interface TopicToCourseComposerProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<CourseBrief>;
  onSubmit?: (brief: CourseBrief) => void;
}
export function TopicToCourseComposer({
  className,
  defaultValue,
  onSubmit,
  ...props
}: TopicToCourseComposerProps) {
  const [brief, setBrief] = useState<CourseBrief>({
    topic: defaultValue?.topic ?? "Governed AI agents",
    audience: defaultValue?.audience ?? "Product and operations leaders",
    outcome: defaultValue?.outcome ?? "Design a safe autonomous workflow",
    sections: defaultValue?.sections ?? 6,
    language: defaultValue?.language ?? "English",
    audio: defaultValue?.audio ?? true,
    quizzes: defaultValue?.quizzes ?? true
  });
  const update = <K extends keyof CourseBrief>(key: K, value: CourseBrief[K]) =>
    setBrief((current) => ({ ...current, [key]: value }));
  return (
    <form
      className={cn("amro-course-composer", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit?.(brief);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Topic to course"
        title="Create a structured learning experience"
        description="Generate sections, tutor audio, translation, and knowledge checks."
      >
        <div>
          <Input
            label="Topic"
            value={brief.topic}
            onChange={(event) => update("topic", event.target.value)}
          />
          <Input
            label="Learner audience"
            value={brief.audience}
            onChange={(event) => update("audience", event.target.value)}
          />
          <Input
            label="Desired outcome"
            value={brief.outcome}
            onChange={(event) => update("outcome", event.target.value)}
          />
          <Input
            label="Sections"
            min="2"
            max="20"
            type="number"
            value={brief.sections}
            onChange={(event) => update("sections", Number(event.target.value))}
          />
          <Input
            label="Language"
            value={brief.language}
            onChange={(event) => update("language", event.target.value)}
          />
        </div>
        <footer>
          <label>
            <input
              checked={brief.audio}
              onChange={(event) => update("audio", event.target.checked)}
              type="checkbox"
            />
            Tutor audio
          </label>
          <label>
            <input
              checked={brief.quizzes}
              onChange={(event) => update("quizzes", event.target.checked)}
              type="checkbox"
            />
            Knowledge checks
          </label>
          <Button disabled={!brief.topic.trim() || !brief.outcome.trim()} type="submit">
            Generate course
            <Sparkles aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface MyJourneyResumeCardProps extends HTMLAttributes<HTMLDivElement> {
  course?: ReactNode;
  section?: ReactNode;
  positionSeconds?: number;
  durationSeconds?: number;
  progress?: number;
  nextAction?: ReactNode;
  lastStudied?: ReactNode;
  onResume?: () => void;
}
export function MyJourneyResumeCard({
  className,
  course = "Governed AI Operations",
  durationSeconds = 780,
  lastStudied = "Yesterday",
  nextAction = "Finish the control-boundary check",
  onResume,
  positionSeconds = 224,
  progress = 56,
  section = "The human approval boundary",
  ...props
}: MyJourneyResumeCardProps) {
  return (
    <Card className={cn("amro-journey-resume", className)} {...props}>
      <header>
        <span>
          <span className="amro-eyebrow">Continue your journey</span>
          <strong>{course}</strong>
          <small>{section}</small>
        </span>
        <Badge tone="neutral">{lastStudied}</Badge>
      </header>
      <div>
        <span className="amro-journey-resume__thumb">
          <Play aria-hidden="true" />
        </span>
        <span>
          <strong>
            {formatTime(positionSeconds)} of {formatTime(durationSeconds)}
          </strong>
          <small>Exact audio position saved</small>
          <progress max="100" value={progress}>
            {progress}%
          </progress>
        </span>
      </div>
      <footer>
        <span>
          <small>Next learning action</small>
          <strong>{nextAction}</strong>
        </span>
        {onResume && (
          <Button onClick={onResume}>
            Resume lesson
            <Play aria-hidden="true" />
          </Button>
        )}
      </footer>
    </Card>
  );
}

export interface LearningMapSection {
  id: string;
  title: ReactNode;
  concepts: number;
  completedConcepts: number;
  checks: number;
  completedChecks: number;
  status?: "complete" | "active" | "locked";
}
export interface LearningSessionMapProps extends Omit<
  HTMLAttributes<HTMLOListElement>,
  "onSelect"
> {
  sections?: readonly LearningMapSection[];
  onSelect?: (section: LearningMapSection) => void;
}
const learningMap: readonly LearningMapSection[] = [
  {
    id: "one",
    title: "Agent foundations",
    concepts: 4,
    completedConcepts: 4,
    checks: 2,
    completedChecks: 2,
    status: "complete"
  },
  {
    id: "two",
    title: "Control boundaries",
    concepts: 5,
    completedConcepts: 3,
    checks: 3,
    completedChecks: 1,
    status: "active"
  },
  {
    id: "three",
    title: "Outcome measurement",
    concepts: 4,
    completedConcepts: 0,
    checks: 2,
    completedChecks: 0,
    status: "locked"
  }
];
export function LearningSessionMap({
  className,
  onSelect,
  sections = learningMap,
  ...props
}: LearningSessionMapProps) {
  return (
    <ol className={cn("amro-learning-map", className)} {...props}>
      {sections.map((section, index) => (
        <li data-status={section.status ?? "active"} key={section.id}>
          <button
            disabled={section.status === "locked"}
            onClick={() => onSelect?.(section)}
            type="button"
          >
            <span>
              {section.status === "complete" ? (
                <Check aria-hidden="true" />
              ) : section.status === "locked" ? (
                <LockKeyhole aria-hidden="true" />
              ) : (
                index + 1
              )}
            </span>
            <span>
              <strong>{section.title}</strong>
              <small>
                {section.completedConcepts}/{section.concepts} concepts · {section.completedChecks}/
                {section.checks} checks
              </small>
              <progress
                max={section.concepts + section.checks}
                value={section.completedConcepts + section.completedChecks}
              />
            </span>
            <ChevronRight aria-hidden="true" />
          </button>
        </li>
      ))}
    </ol>
  );
}

export interface MasteryProgressRingProps extends HTMLAttributes<HTMLDivElement> {
  completion?: number;
  mastery?: number;
  label?: ReactNode;
  detail?: ReactNode;
}
export function MasteryProgressRing({
  className,
  completion = 72,
  detail = "8 of 11 concepts demonstrated",
  label = "Course mastery",
  mastery = 61,
  ...props
}: MasteryProgressRingProps) {
  return (
    <div className={cn("amro-mastery-ring", className)} {...props}>
      <div
        style={
          {
            "--amro-completion": `${completion * 3.6}deg`,
            "--amro-mastery": `${mastery * 3.6}deg`
          } as CSSProperties
        }
      >
        <span>
          <strong>{mastery}%</strong>
          <small>mastery</small>
        </span>
      </div>
      <span>
        <strong>{label}</strong>
        <small>{detail}</small>
        <span>
          <i data-kind="completion" />
          {completion}% completed
        </span>
        <span>
          <i data-kind="mastery" />
          {mastery}% demonstrated
        </span>
      </span>
    </div>
  );
}

export interface MasteryAxis {
  id: string;
  label: ReactNode;
  score: number;
  target?: number;
}
export interface SkillMasteryRadarProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "title" | "onSelect"
> {
  axes?: readonly MasteryAxis[];
  title?: ReactNode;
  onSelect?: (axis: MasteryAxis) => void;
}
const masteryAxes: readonly MasteryAxis[] = [
  { id: "concepts", label: "Concepts", score: 82, target: 80 },
  { id: "application", label: "Application", score: 68, target: 75 },
  { id: "judgment", label: "Judgment", score: 74, target: 80 },
  { id: "recall", label: "Recall", score: 91, target: 75 },
  { id: "explanation", label: "Explanation", score: 63, target: 70 }
];
export function SkillMasteryRadar({
  axes = masteryAxes,
  className,
  onSelect,
  title = "Skill mastery",
  ...props
}: SkillMasteryRadarProps) {
  const points = axes
    .map((axis, index) => {
      const angle = (Math.PI * 2 * index) / axes.length - Math.PI / 2;
      const radius = axis.score * 0.82;
      return `${100 + Math.cos(angle) * radius},${100 + Math.sin(angle) * radius}`;
    })
    .join(" ");
  return (
    <div className={cn("amro-skill-radar", className)} {...props}>
      <header>
        <span>
          <strong>{title}</strong>
          <small>Demonstrated understanding by dimension</small>
        </span>
        <Badge tone="info">
          {Math.round(axes.reduce((sum, item) => sum + item.score, 0) / axes.length)}% overall
        </Badge>
      </header>
      <div>
        <svg aria-label="Mastery radar chart" role="img" viewBox="0 0 200 200">
          <polygon className="amro-skill-radar__grid" points="100,12 184,73 152,170 48,170 16,73" />
          <polygon className="amro-skill-radar__shape" points={points} />
        </svg>
        <ul>
          {axes.map((axis) => (
            <li key={axis.id}>
              <button onClick={() => onSelect?.(axis)} type="button">
                <span>{axis.label}</span>
                <strong>{axis.score}%</strong>
                <small>
                  {axis.score >= (axis.target ?? 75)
                    ? "Strength"
                    : `${(axis.target ?? 75) - axis.score}% gap`}
                </small>
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export type AdaptiveBranch = "simpler" | "revision" | "advanced";
export interface AdaptivePathCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  reason?: ReactNode;
  recommended?: AdaptiveBranch;
  options?: readonly {
    id: AdaptiveBranch;
    title: ReactNode;
    detail: ReactNode;
    duration?: ReactNode;
  }[];
  onSelect?: (branch: AdaptiveBranch) => void;
}
const adaptiveOptions = [
  {
    id: "simpler" as const,
    title: "Simpler explanation",
    detail: "Rebuild the concept with a concrete analogy",
    duration: "4 min"
  },
  {
    id: "revision" as const,
    title: "Quick revision",
    detail: "Revisit the two missed ideas",
    duration: "7 min"
  },
  {
    id: "advanced" as const,
    title: "Advanced branch",
    detail: "Apply the concept to a harder scenario",
    duration: "10 min"
  }
];
export function AdaptivePathCard({
  className,
  onSelect,
  options = adaptiveOptions,
  reason = "Your answers show strong recall but lower confidence applying this concept.",
  recommended = "revision",
  ...props
}: AdaptivePathCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-adaptive-path", className)}
      eyebrow="Adaptive next step"
      title="Choose your best path"
      description={reason}
      status={
        <Badge tone="info">
          <Sparkles aria-hidden="true" />
          Personalised
        </Badge>
      }
      {...props}
    >
      <div>
        {options.map((option) => (
          <button
            data-recommended={option.id === recommended}
            key={option.id}
            onClick={() => onSelect?.(option.id)}
            type="button"
          >
            <span>
              {option.id === "simpler" ? (
                <Lightbulb aria-hidden="true" />
              ) : option.id === "revision" ? (
                <RotateCcw aria-hidden="true" />
              ) : (
                <Brain aria-hidden="true" />
              )}
            </span>
            <span>
              <strong>{option.title}</strong>
              <small>{option.detail}</small>
            </span>
            <Badge tone={option.id === recommended ? "success" : "neutral"}>
              {option.id === recommended ? "Recommended" : option.duration}
            </Badge>
          </button>
        ))}
      </div>
    </FeaturePanel>
  );
}

export interface LearningStreakTileProps extends HTMLAttributes<HTMLDivElement> {
  days?: number;
  activeDays?: readonly number[];
  weeklyGoal?: number;
  sessionsThisWeek?: number;
  message?: ReactNode;
}
export function LearningStreakTile({
  activeDays = [1, 2, 4, 5],
  className,
  days = 6,
  message = "A short session today keeps your momentum.",
  sessionsThisWeek = 4,
  weeklyGoal = 5,
  ...props
}: LearningStreakTileProps) {
  return (
    <Card className={cn("amro-learning-streak", className)} {...props}>
      <header>
        <span>
          <Flame aria-hidden="true" />
        </span>
        <span>
          <strong>{days} day streak</strong>
          <small>{message}</small>
        </span>
        <Badge tone="neutral">
          {sessionsThisWeek}/{weeklyGoal} this week
        </Badge>
      </header>
      <div aria-label="Learning activity this week">
        {["M", "T", "W", "T", "F", "S", "S"].map((day, index) => (
          <span data-active={activeDays.includes(index + 1)} key={`${day}-${index}`}>
            <i>{activeDays.includes(index + 1) ? <Check aria-hidden="true" /> : null}</i>
            <small>{day}</small>
          </span>
        ))}
      </div>
    </Card>
  );
}

export interface BadgeEarnedToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  points?: number;
  icon?: ReactNode;
  onView?: () => void;
  onDismiss?: () => void;
}
export function BadgeEarnedToast({
  className,
  description = "You demonstrated the control-boundary concept in two scenarios.",
  icon = <Award aria-hidden="true" />,
  onDismiss,
  onView,
  points = 120,
  title = "Governance guide",
  ...props
}: BadgeEarnedToastProps) {
  return (
    <div className={cn("amro-badge-toast", className)} role="status" {...props}>
      <span>{icon}</span>
      <span>
        <span className="amro-eyebrow">Badge earned · +{points} XP</span>
        <strong>{title}</strong>
        <small>{description}</small>
      </span>
      {onView && (
        <Button onClick={onView} size="sm" variant="secondary">
          View badge
        </Button>
      )}
      {onDismiss && (
        <button aria-label="Dismiss badge" onClick={onDismiss} type="button">
          <X aria-hidden="true" />
        </button>
      )}
    </div>
  );
}

export interface CertificateCardProps extends HTMLAttributes<HTMLDivElement> {
  course?: ReactNode;
  learner?: ReactNode;
  issuedAt?: ReactNode;
  credentialId?: string;
  verified?: boolean;
  onVerify?: () => void;
  onShare?: () => void;
  onDownload?: () => void;
}
export function CertificateCard({
  className,
  course = "Governed AI Operations",
  credentialId = "AMRO-GOV-2026-1842",
  issuedAt = "5 August 2026",
  learner = "Maya Chen",
  onDownload,
  onShare,
  onVerify,
  verified = true,
  ...props
}: CertificateCardProps) {
  return (
    <Card className={cn("amro-certificate-card", className)} {...props}>
      <div className="amro-certificate-card__preview">
        <span>
          <Award aria-hidden="true" />
        </span>
        <span className="amro-eyebrow">Certificate of mastery</span>
        <h3>{course}</h3>
        <p>
          Awarded to <strong>{learner}</strong>
        </p>
        <small>
          Issued {issuedAt} · {credentialId}
        </small>
      </div>
      <footer>
        <StatusIndicator
          label={verified ? "Verified credential" : "Verification pending"}
          status={verified ? "success" : "pending"}
        />
        <div>
          {onVerify && (
            <Button onClick={onVerify} variant="tertiary">
              Verify
            </Button>
          )}
          {onShare && (
            <Button onClick={onShare} variant="secondary">
              <Share2 aria-hidden="true" />
              Share
            </Button>
          )}
          {onDownload && (
            <Button onClick={onDownload}>
              <Download aria-hidden="true" />
              Download
            </Button>
          )}
        </div>
      </footer>
    </Card>
  );
}

export interface LearningLanguages {
  content: string;
  transcript: string;
  voice: string;
}
export interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: LearningLanguages;
  languages?: readonly string[];
  onChange?: (value: LearningLanguages) => void;
}
export function LanguageSwitcher({
  className,
  languages = ["English", "Finnish", "Hindi", "Spanish", "German"],
  onChange,
  value = { content: "English", transcript: "English", voice: "English" },
  ...props
}: LanguageSwitcherProps) {
  const [selection, setSelection] = useState(value);
  const update = (key: keyof LearningLanguages, next: string) => {
    const updated = { ...selection, [key]: next };
    setSelection(updated);
    onChange?.(updated);
  };
  return (
    <FeaturePanel
      className={cn("amro-language-switcher", className)}
      eyebrow="Lesson language"
      title="Control each learning layer"
      description="Content, transcript, and tutor voice can use different languages."
      status={<Languages aria-hidden="true" />}
      {...props}
    >
      <div>
        {(["content", "transcript", "voice"] as const).map((key) => (
          <label key={key}>
            <span>
              <strong>
                {key === "content"
                  ? "Lesson content"
                  : key === "transcript"
                    ? "Transcript"
                    : "Tutor voice"}
              </strong>
              <small>
                {key === "voice" ? "Audio regenerates when changed" : "Available immediately"}
              </small>
            </span>
            <Select onChange={(event) => update(key, event.target.value)} value={selection[key]}>
              {languages.map((language) => (
                <option key={language}>{language}</option>
              ))}
            </Select>
          </label>
        ))}
      </div>
    </FeaturePanel>
  );
}

export interface HandsFreeModeProps extends HTMLAttributes<HTMLDivElement> {
  playing?: boolean;
  listening?: boolean;
  section?: ReactNode;
  elapsed?: ReactNode;
  onPlayChange?: (playing: boolean) => void;
  onAsk?: () => void;
  onPrevious?: () => void;
  onNext?: () => void;
}
export function HandsFreeMode({
  className,
  elapsed = "03:44 / 12:58",
  listening = false,
  onAsk,
  onNext,
  onPlayChange,
  onPrevious,
  playing = true,
  section = "The human approval boundary",
  ...props
}: HandsFreeModeProps) {
  return (
    <div className={cn("amro-hands-free", className)} {...props}>
      <header>
        <span>
          <span className="amro-eyebrow">Hands-free lesson</span>
          <strong>{section}</strong>
          <small>{elapsed}</small>
        </span>
        <StatusIndicator
          label={listening ? "Listening" : playing ? "Playing" : "Paused"}
          status={listening ? "active" : playing ? "online" : "idle"}
        />
      </header>
      <div>
        <button aria-label="Previous section" onClick={onPrevious} type="button">
          <RotateCcw aria-hidden="true" />
          <small>Previous</small>
        </button>
        <button
          aria-label={playing ? "Pause lesson" : "Play lesson"}
          onClick={() => onPlayChange?.(!playing)}
          type="button"
        >
          {playing ? <Pause aria-hidden="true" /> : <Play aria-hidden="true" />}
          <small>{playing ? "Pause" : "Play"}</small>
        </button>
        <button aria-label="Ask tutor" data-active={listening} onClick={onAsk} type="button">
          <Mic aria-hidden="true" />
          <small>Ask tutor</small>
        </button>
        <button aria-label="Next section" onClick={onNext} type="button">
          <ChevronRight aria-hidden="true" />
          <small>Next</small>
        </button>
      </div>
    </div>
  );
}

export type LearningContext = "walk" | "drive" | "talk" | "focus";
export interface LearningContextModeProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  value?: LearningContext;
  onChange?: (mode: LearningContext) => void;
}
const contextModes: readonly {
  id: LearningContext;
  label: string;
  detail: string;
  icon: ReactNode;
}[] = [
  {
    id: "walk",
    label: "Walk",
    detail: "Audio-first, large controls",
    icon: <Footprints aria-hidden="true" />
  },
  {
    id: "drive",
    label: "Drive",
    detail: "Voice-only interaction",
    icon: <Car aria-hidden="true" />
  },
  { id: "talk", label: "Talk", detail: "Tutor conversation", icon: <Mic aria-hidden="true" /> },
  {
    id: "focus",
    label: "Focus",
    detail: "Transcript and checks",
    icon: <Target aria-hidden="true" />
  }
];
export function LearningContextMode({
  className,
  onChange,
  value: controlled,
  ...props
}: LearningContextModeProps) {
  const [internal, setInternal] = useState<LearningContext>("focus");
  const value = controlled ?? internal;
  return (
    <fieldset className={cn("amro-learning-context", className)} {...props}>
      <legend>How are you learning right now?</legend>
      <div>
        {contextModes.map((mode) => (
          <label data-selected={value === mode.id} key={mode.id}>
            <input
              checked={value === mode.id}
              name="learning-context"
              onChange={() => {
                setInternal(mode.id);
                onChange?.(mode.id);
              }}
              type="radio"
            />
            <span>{mode.icon}</span>
            <span>
              <strong>{mode.label}</strong>
              <small>{mode.detail}</small>
            </span>
          </label>
        ))}
      </div>
    </fieldset>
  );
}

export interface OfflineLessonCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  sizeMb?: number;
  status?: "available" | "downloading" | "downloaded" | "syncing" | "error";
  progress?: number;
  lastSynced?: ReactNode;
  onDownload?: () => void;
  onRemove?: () => void;
}
export function OfflineLessonCard({
  className,
  lastSynced = "Progress synced 2 min ago",
  onDownload,
  onRemove,
  progress = 68,
  sizeMb = 42,
  status = "available",
  title = "Governed AI Operations",
  ...props
}: OfflineLessonCardProps) {
  return (
    <Card className={cn("amro-offline-lesson", className)} {...props}>
      <header>
        <span>
          <Download aria-hidden="true" />
        </span>
        <span>
          <strong>{title}</strong>
          <small>{sizeMb} MB · audio, transcript, and checks</small>
        </span>
        <StatusIndicator
          label={status}
          status={
            status === "downloaded"
              ? "success"
              : status === "downloading" || status === "syncing"
                ? "loading"
                : status === "available"
                  ? "idle"
                  : status
          }
        />
      </header>
      {status === "downloading" && (
        <div>
          <progress max="100" value={progress}>
            {progress}%
          </progress>
          <strong>{progress}%</strong>
        </div>
      )}
      <footer>
        <span>
          <ShieldCheck aria-hidden="true" />
          {lastSynced}
        </span>
        {status === "downloaded" && onRemove ? (
          <Button onClick={onRemove} variant="tertiary">
            Remove download
          </Button>
        ) : (
          onDownload && (
            <Button onClick={onDownload} variant="secondary">
              <Download aria-hidden="true" />
              Download for offline
            </Button>
          )
        )}
      </footer>
    </Card>
  );
}

export interface TutorMemory {
  id: string;
  label: ReactNode;
  detail?: ReactNode;
  category: "goal" | "preference" | "progress";
  removable?: boolean;
}
export interface TutorMemoryPanelProps extends HTMLAttributes<HTMLDivElement> {
  memories?: readonly TutorMemory[];
  onRemove?: (memory: TutorMemory) => void;
  onClear?: () => void;
}
const tutorMemories: readonly TutorMemory[] = [
  { id: "goal", label: "Design a governed AI workflow", detail: "Learning goal", category: "goal" },
  {
    id: "analogy",
    label: "Prefers operational examples",
    detail: "Explanation preference",
    category: "preference",
    removable: true
  },
  {
    id: "gap",
    label: "Revisit approval exceptions",
    detail: "Current knowledge gap",
    category: "progress",
    removable: true
  }
];
export function TutorMemoryPanel({
  className,
  memories = tutorMemories,
  onClear,
  onRemove,
  ...props
}: TutorMemoryPanelProps) {
  return (
    <FeaturePanel
      className={cn("amro-tutor-memory", className)}
      eyebrow="Tutor memory"
      title="What your tutor remembers"
      description="Memory improves continuity and stays under your control."
      status={<Badge tone="neutral">{memories.length} items</Badge>}
      {...props}
    >
      {memories.length ? (
        <ul>
          {memories.map((memory) => (
            <li key={memory.id}>
              <span>
                {memory.category === "goal" ? (
                  <Target aria-hidden="true" />
                ) : memory.category === "preference" ? (
                  <Lightbulb aria-hidden="true" />
                ) : (
                  <Brain aria-hidden="true" />
                )}
              </span>
              <span>
                <strong>{memory.label}</strong>
                <small>{memory.detail}</small>
              </span>
              {memory.removable && onRemove && (
                <button
                  aria-label={`Forget ${getAccessibleText(memory.label, "memory")}`}
                  onClick={() => onRemove(memory)}
                  type="button"
                >
                  <Trash2 aria-hidden="true" />
                </button>
              )}
            </li>
          ))}
        </ul>
      ) : (
        <EmptyNotice
          title="No tutor memory"
          description="Your tutor will adapt only during the current session."
        />
      )}
      {onClear && memories.length > 0 && (
        <Button onClick={onClear} variant="tertiary">
          Clear removable memory
        </Button>
      )}
    </FeaturePanel>
  );
}

export interface LearningGoal {
  outcome: string;
  deadline: string;
  weeklyMinutes: number;
}
export interface LearningGoalCardProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onChange" | "onSubmit"
> {
  value?: LearningGoal;
  onChange?: (goal: LearningGoal) => void;
  onSubmit?: (goal: LearningGoal) => void;
}
export function LearningGoalCard({
  className,
  onChange,
  onSubmit,
  value = {
    outcome: "Design a governed AI workflow for my team",
    deadline: "2026-09-30",
    weeklyMinutes: 90
  },
  ...props
}: LearningGoalCardProps) {
  const [goal, setGoal] = useState(value);
  const update = <K extends keyof LearningGoal>(key: K, next: LearningGoal[K]) => {
    const updated = { ...goal, [key]: next };
    setGoal(updated);
    onChange?.(updated);
  };
  return (
    <form
      className={cn("amro-learning-goal", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit?.(goal);
      }}
      {...props}
    >
      <header>
        <Target aria-hidden="true" />
        <span>
          <strong>Your learning goal</strong>
          <small>Used to personalise pace and practice</small>
        </span>
      </header>
      <Input
        label="Desired outcome"
        value={goal.outcome}
        onChange={(event) => update("outcome", event.target.value)}
      />
      <div>
        <label className="amro-field">
          <span className="amro-field__label">Target date</span>
          <DateInput
            value={goal.deadline}
            onChange={(event) => update("deadline", event.target.value)}
          />
        </label>
        <Input
          label="Minutes per week"
          min="15"
          step="15"
          type="number"
          value={goal.weeklyMinutes}
          onChange={(event) => update("weeklyMinutes", Number(event.target.value))}
        />
      </div>
      <footer>
        <span>
          <CalendarDays aria-hidden="true" />
          About {Math.ceil(goal.weeklyMinutes / 30)} short sessions per week
        </span>
        <Button disabled={!goal.outcome.trim()} type="submit">
          Save goal
        </Button>
      </footer>
    </form>
  );
}

export interface OrganisationLearner {
  id: string;
  name: string;
  email: string;
  role: ReactNode;
  assignment?: ReactNode;
  activation: "invited" | "active" | "inactive";
  progress?: number;
}
export interface OrganisationAllocationTableProps extends HTMLAttributes<HTMLDivElement> {
  learners?: readonly OrganisationLearner[];
  onAssign?: (learner: OrganisationLearner) => void;
  onInvite?: () => void;
}
const organisationLearners: readonly OrganisationLearner[] = [
  {
    id: "maya",
    name: "Maya Chen",
    email: "maya@example.com",
    role: "Operations",
    assignment: "Governed AI Operations",
    activation: "active",
    progress: 72
  },
  {
    id: "alex",
    name: "Alex Morgan",
    email: "alex@example.com",
    role: "Product",
    assignment: "AI Product Foundations",
    activation: "active",
    progress: 46
  },
  {
    id: "sam",
    name: "Sam Wilson",
    email: "sam@example.com",
    role: "Support",
    activation: "invited",
    progress: 0
  }
];
export function OrganisationAllocationTable({
  className,
  learners = organisationLearners,
  onAssign,
  onInvite,
  ...props
}: OrganisationAllocationTableProps) {
  return (
    <div className={cn("amro-allocation-table", className)} {...props}>
      <header>
        <span>
          <strong>Learning allocation</strong>
          <small>
            {learners.filter((learner) => learner.activation === "active").length} active of{" "}
            {learners.length}
          </small>
        </span>
        {onInvite && (
          <Button onClick={onInvite} size="sm">
            Invite learner
          </Button>
        )}
      </header>
      <table>
        <thead>
          <tr>
            <th>Learner</th>
            <th>Role</th>
            <th>Programme or tutor</th>
            <th>Activation</th>
            <th>Progress</th>
            <th>
              <span className="amro-sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {learners.map((learner) => (
            <tr key={learner.id}>
              <td>
                <strong>{learner.name}</strong>
                <small>{learner.email}</small>
              </td>
              <td>{learner.role}</td>
              <td>{learner.assignment ?? "Unassigned"}</td>
              <td>
                <StatusIndicator
                  label={learner.activation}
                  status={
                    learner.activation === "active"
                      ? "online"
                      : learner.activation === "invited"
                        ? "pending"
                        : "offline"
                  }
                />
              </td>
              <td>
                <progress max="100" value={learner.progress ?? 0} /> {learner.progress ?? 0}%
              </td>
              <td>
                {onAssign && (
                  <Button onClick={() => onAssign(learner)} size="sm" variant="tertiary">
                    Assign
                  </Button>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export interface HeatmapCell {
  learnerId: string;
  topicId: string;
  engagement: number;
  mastery: number;
}
export interface TeamLearningHeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  learners?: readonly { id: string; name: ReactNode }[];
  topics?: readonly { id: string; label: ReactNode }[];
  cells?: readonly HeatmapCell[];
  onSelect?: (cell: HeatmapCell) => void;
}
const heatLearners = [
  { id: "maya", name: "Maya" },
  { id: "alex", name: "Alex" },
  { id: "sam", name: "Sam" }
];
const heatTopics = [
  { id: "foundations", label: "Foundations" },
  { id: "governance", label: "Governance" },
  { id: "outcomes", label: "Outcomes" },
  { id: "practice", label: "Practice" }
];
const heatCells: readonly HeatmapCell[] = heatLearners.flatMap((learner, row) =>
  heatTopics.map((topic, column) => ({
    learnerId: learner.id,
    topicId: topic.id,
    engagement: 55 + (((row + column) * 9) % 43),
    mastery: 48 + (((row * 2 + column) * 11) % 49)
  }))
);
export function TeamLearningHeatmap({
  cells = heatCells,
  className,
  learners = heatLearners,
  onSelect,
  topics = heatTopics,
  ...props
}: TeamLearningHeatmapProps) {
  return (
    <div className={cn("amro-learning-heatmap", className)} {...props}>
      <header>
        <span>
          <strong>Team learning overview</strong>
          <small>Course-level engagement and mastery—not activity surveillance</small>
        </span>
        <Badge tone="success">
          <ShieldCheck aria-hidden="true" />
          Privacy-safe
        </Badge>
      </header>
      <div
        className="amro-learning-heatmap__grid"
        style={{
          gridTemplateColumns: `minmax(100px, 1fr) repeat(${topics.length}, minmax(80px, 1fr))`
        }}
      >
        <span />
        {topics.map((topic) => (
          <strong key={topic.id}>{topic.label}</strong>
        ))}
        {learners.flatMap((learner) => [
          <strong key={`${learner.id}-label`}>{learner.name}</strong>,
          ...topics.map((topic) => {
            const cell = cells.find(
              (item) => item.learnerId === learner.id && item.topicId === topic.id
            ) ?? { learnerId: learner.id, topicId: topic.id, engagement: 0, mastery: 0 };
            return (
              <button
                aria-label={`${getAccessibleText(learner.name, "Learner")}, ${getAccessibleText(topic.label, "topic")}: ${cell.mastery}% mastery`}
                key={`${learner.id}-${topic.id}`}
                onClick={() => onSelect?.(cell)}
                style={{ "--amro-heat": cell.mastery / 100 } as CSSProperties}
                type="button"
              >
                <strong>{cell.mastery}%</strong>
                <small>{cell.engagement}% engaged</small>
              </button>
            );
          })
        ])}
      </div>
    </div>
  );
}

export interface CreditPoolMeterProps extends HTMLAttributes<HTMLDivElement> {
  personalUsed?: number;
  personalLimit?: number;
  organisationUsed?: number;
  organisationLimit?: number;
  resetLabel?: ReactNode;
}
export function CreditPoolMeter({
  className,
  organisationLimit = 5000,
  organisationUsed = 3180,
  personalLimit = 1000,
  personalUsed = 420,
  resetLabel = "Resets 1 September",
  ...props
}: CreditPoolMeterProps) {
  const totalUsed = personalUsed + organisationUsed;
  const total = personalLimit + organisationLimit;
  return (
    <FeaturePanel
      className={cn("amro-credit-pool", className)}
      eyebrow="Learning credits"
      title={`${totalUsed.toLocaleString()} of ${total.toLocaleString()} used`}
      description={resetLabel}
      status={<Badge tone="neutral">{Math.round((totalUsed / total) * 100)}%</Badge>}
      {...props}
    >
      <div>
        <section>
          <span>
            <UserCog aria-hidden="true" />
            <strong>Personal</strong>
            <small>
              {personalUsed.toLocaleString()} / {personalLimit.toLocaleString()}
            </small>
          </span>
          <progress max={personalLimit} value={personalUsed} />
        </section>
        <section>
          <span>
            <Building2 aria-hidden="true" />
            <strong>Organisation</strong>
            <small>
              {organisationUsed.toLocaleString()} / {organisationLimit.toLocaleString()}
            </small>
          </span>
          <progress max={organisationLimit} value={organisationUsed} />
        </section>
      </div>
    </FeaturePanel>
  );
}

export type LearningRole = "learner" | "organisation-admin" | "instructor" | "platform-admin";
export interface RoleBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  role?: LearningRole;
}
const roleLabels: Record<LearningRole, string> = {
  learner: "Learner",
  "organisation-admin": "Organisation admin",
  instructor: "Instructor",
  "platform-admin": "Platform admin"
};
export function RoleBadge({ className, role = "learner", ...props }: RoleBadgeProps) {
  const icon =
    role === "learner" ? (
      <GraduationCap aria-hidden="true" />
    ) : role === "instructor" ? (
      <BookOpen aria-hidden="true" />
    ) : role === "organisation-admin" ? (
      <Users aria-hidden="true" />
    ) : (
      <ShieldCheck aria-hidden="true" />
    );
  return (
    <span className={cn("amro-role-badge", `amro-role-badge--${role}`, className)} {...props}>
      {icon}
      {roleLabels[role]}
    </span>
  );
}
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-meeting.md

Installable AmroUI product component source.

# AmroUI meeting

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-meeting.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-meeting.json)

## Source

### source/components/meeting.tsx

```tsx
import {
  AlertTriangle,
  ArrowRight,
  Bot,
  CalendarCheck,
  CalendarDays,
  Check,
  ChevronRight,
  Clock3,
  Code2,
  Copy,
  ExternalLink,
  Globe2,
  Headphones,
  Mail,
  MessageSquare,
  Phone,
  RefreshCw,
  ShieldCheck,
  Sparkles,
  UserRound,
  Users,
  Video,
  Wifi,
  X
} from "lucide-react";
import { useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "../lib/cn.js";
import { Avatar } from "./avatar.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import { Card } from "./card.js";
import { FeaturePanel, StatusIndicator } from "./feature-primitives.js";
import { DateInput, Input, Select, Textarea, TimeInput } from "./input.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export type HostAvailability = "available" | "busy" | "away" | "offline";
export interface InstantMeetCTAProps extends HTMLAttributes<HTMLDivElement> {
  host?: ReactNode;
  availability?: HostAvailability;
  waitMinutes?: number;
  duration?: ReactNode;
  onStart?: () => void;
  onSchedule?: () => void;
}
export function InstantMeetCTA({
  availability = "available",
  className,
  duration = "Up to 30 minutes",
  host = "Amro specialist",
  onSchedule,
  onStart,
  waitMinutes = 0,
  ...props
}: InstantMeetCTAProps) {
  const available = availability === "available";
  return (
    <div className={cn("amro-instant-meet", className)} {...props}>
      <span className="amro-instant-meet__icon">
        <Video aria-hidden="true" />
        <i aria-hidden="true" />
      </span>
      <span>
        <span className="amro-eyebrow">Live conversation</span>
        <strong>
          {available
            ? `${getAccessibleText(host, "Host")} is available now`
            : `${getAccessibleText(host, "Host")} is ${availability}`}
        </strong>
        <small>
          {available
            ? `${getAccessibleText(duration, "Flexible duration")} · no login required`
            : waitMinutes
              ? `Expected in ${waitMinutes} minutes`
              : "Choose a scheduled time instead"}
        </small>
      </span>
      <StatusIndicator
        label={available ? "Available now" : availability}
        status={available ? "online" : availability === "busy" ? "warning" : "offline"}
      />
      <div>
        {available && onStart && (
          <Button onClick={onStart}>
            Talk now
            <Video aria-hidden="true" />
          </Button>
        )}
        {onSchedule && (
          <Button onClick={onSchedule} variant={available ? "tertiary" : "primary"}>
            Schedule instead
          </Button>
        )}
      </div>
    </div>
  );
}

export interface GuestDetails {
  name: string;
  email: string;
  reason: string;
}
export interface NoLoginGuestFormProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<GuestDetails>;
  privacyLabel?: ReactNode;
  onSubmit?: (details: GuestDetails) => void;
}
export function NoLoginGuestForm({
  className,
  defaultValue,
  onSubmit,
  privacyLabel = "Used only for this meeting and its calendar invitation.",
  ...props
}: NoLoginGuestFormProps) {
  const [details, setDetails] = useState<GuestDetails>({
    name: defaultValue?.name ?? "",
    email: defaultValue?.email ?? "",
    reason: defaultValue?.reason ?? ""
  });
  const update = (key: keyof GuestDetails, value: string) =>
    setDetails((current) => ({ ...current, [key]: value }));
  const valid =
    details.name.trim().length > 1 &&
    /^\S+@\S+\.\S+$/.test(details.email) &&
    details.reason.trim().length > 3;
  return (
    <form
      className={cn("amro-guest-form", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (valid) onSubmit?.(details);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="No account needed"
        title="Tell the host who is joining"
        description="Three details, then AmroMeet creates the room."
      >
        <div>
          <Input
            autoComplete="name"
            label="Name"
            value={details.name}
            onChange={(event) => update("name", event.target.value)}
          />
          <Input
            autoComplete="email"
            label="Email"
            type="email"
            value={details.email}
            onChange={(event) => update("email", event.target.value)}
          />
          <label>
            <span>What would you like to discuss?</span>
            <Textarea
              onChange={(event) => update("reason", event.target.value)}
              value={details.reason}
            />
          </label>
        </div>
        <footer>
          <span>
            <Check aria-hidden="true" />
            {privacyLabel}
          </span>
          <Button disabled={!valid} type="submit">
            Continue to meeting
            <ArrowRight aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface LiveMeetReadyCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
  host?: ReactNode;
  joinUrl?: string;
  expiresAt?: ReactNode;
  emailStatus?: "sending" | "sent" | "failed";
  onCopy?: (url: string) => void;
  onJoin?: (url: string) => void;
}
export function LiveMeetReadyCard({
  className,
  emailStatus = "sent",
  expiresAt = "Link expires in 45 minutes",
  host = "Maya Chen",
  joinUrl = "https://meet.google.com/amro-live",
  onCopy,
  onJoin,
  ...props
}: LiveMeetReadyCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-live-meet-ready", className)}
      eyebrow="Your meeting is ready"
      title={`Join ${getAccessibleText(host, "the host")} now`}
      description={expiresAt}
      status={<StatusIndicator label="Room live" status="online" />}
      {...props}
    >
      <div className="amro-live-meet-ready__link">
        <Video aria-hidden="true" />
        <code>{joinUrl}</code>
        <Button
          aria-label="Copy meeting link"
          onClick={() => onCopy?.(joinUrl)}
          size="sm"
          variant="secondary"
        >
          <Copy aria-hidden="true" />
        </Button>
      </div>
      <div className="amro-live-meet-ready__delivery">
        <StatusIndicator
          label={`Invitation ${emailStatus}`}
          status={
            emailStatus === "sent" ? "success" : emailStatus === "sending" ? "loading" : "error"
          }
        />
        <span>Calendar details include the secure joining link.</span>
      </div>
      {onJoin && (
        <Button onClick={() => onJoin(joinUrl)} size="lg">
          Join Google Meet
          <ExternalLink aria-hidden="true" />
        </Button>
      )}
    </FeaturePanel>
  );
}

export interface HostPresenceIndicatorProps extends HTMLAttributes<HTMLDivElement> {
  host?: string;
  avatarUrl?: string;
  availability?: HostAvailability;
  currentActivity?: ReactNode;
  nextAvailable?: ReactNode;
  compact?: boolean;
}
export function HostPresenceIndicator({
  availability = "available",
  avatarUrl,
  className,
  compact = false,
  currentActivity,
  host = "Maya Chen",
  nextAvailable = "Today at 15:30",
  ...props
}: HostPresenceIndicatorProps) {
  return (
    <div
      className={cn("amro-host-presence", compact && "amro-host-presence--compact", className)}
      {...props}
    >
      <span>
        <Avatar name={host} {...(avatarUrl ? { src: avatarUrl } : {})} />
        <i data-state={availability} />
      </span>
      <span>
        <strong>{host}</strong>
        <small>
          {availability === "available"
            ? "Available for a live meeting"
            : (currentActivity ?? `Next available ${getAccessibleText(nextAvailable, "soon")}`)}
        </small>
      </span>
      <StatusIndicator
        label={availability}
        status={
          availability === "available" ? "online" : availability === "busy" ? "warning" : "offline"
        }
      />
    </div>
  );
}

export interface TalkNowFallbackProps extends HTMLAttributes<HTMLDivElement> {
  host?: ReactNode;
  reason?: ReactNode;
  nextSlot?: ReactNode;
  timezone?: ReactNode;
  onBookNext?: () => void;
  onSeeTimes?: () => void;
}
export function TalkNowFallback({
  className,
  host = "Maya",
  nextSlot = "Today, 15:30",
  onBookNext,
  onSeeTimes,
  reason = "Currently in another meeting",
  timezone = "Europe/Helsinki",
  ...props
}: TalkNowFallbackProps) {
  return (
    <FeaturePanel
      className={cn("amro-talk-fallback", className)}
      eyebrow="Live meeting unavailable"
      title={`${getAccessibleText(host, "The host")} cannot talk right now`}
      description={reason}
      status={<StatusIndicator label="Busy" status="warning" />}
      {...props}
    >
      <div>
        <CalendarDays aria-hidden="true" />
        <span>
          <small>Next bookable slot</small>
          <strong>{nextSlot}</strong>
          <small>{timezone}</small>
        </span>
      </div>
      <footer>
        {onSeeTimes && (
          <Button onClick={onSeeTimes} variant="secondary">
            See all times
          </Button>
        )}
        {onBookNext && <Button onClick={onBookNext}>Book next slot</Button>}
      </footer>
    </FeaturePanel>
  );
}

export type EventTypeId = "consultation" | "demo" | "support";
export interface MeetingEventType {
  id: EventTypeId;
  label: ReactNode;
  duration: number;
  channel: "video" | "phone";
  description?: ReactNode;
  inclusions?: readonly ReactNode[];
}
export interface EventTypeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  events?: readonly MeetingEventType[];
  value?: EventTypeId;
  onChange?: (event: MeetingEventType) => void;
}
const eventTypes: readonly MeetingEventType[] = [
  {
    id: "consultation",
    label: "Consultation",
    duration: 30,
    channel: "video",
    description: "Explore your goal with an Amro specialist.",
    inclusions: ["Goal review", "Practical next steps"]
  },
  {
    id: "demo",
    label: "Product demo",
    duration: 45,
    channel: "video",
    description: "A tailored walkthrough using your use case.",
    inclusions: ["Live product tour", "Questions"]
  },
  {
    id: "support",
    label: "Support call",
    duration: 20,
    channel: "video",
    description: "Resolve a specific product question.",
    inclusions: ["Issue diagnosis", "Follow-up summary"]
  }
];
export function EventTypeSwitcher({
  className,
  events = eventTypes,
  onChange,
  value: controlled,
  ...props
}: EventTypeSwitcherProps) {
  const [internal, setInternal] = useState<EventTypeId>(events[0]?.id ?? "consultation");
  const value = controlled ?? internal;
  return (
    <div
      className={cn("amro-event-switcher", className)}
      role="tablist"
      aria-label="Meeting type"
      {...props}
    >
      {events.map((event) => (
        <button
          aria-selected={value === event.id}
          key={event.id}
          onClick={() => {
            setInternal(event.id);
            onChange?.(event);
          }}
          role="tab"
          type="button"
        >
          <span>
            {event.channel === "video" ? (
              <Video aria-hidden="true" />
            ) : (
              <Phone aria-hidden="true" />
            )}
          </span>
          <span>
            <strong>{event.label}</strong>
            <small>{event.duration} min</small>
          </span>
        </button>
      ))}
    </div>
  );
}

export interface EventTypeCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  event?: MeetingEventType;
  selected?: boolean;
  host?: ReactNode;
  onSelect?: (event: MeetingEventType) => void;
}
export function EventTypeCard({
  className,
  event = eventTypes[0]!,
  host = "Amro specialist",
  onSelect,
  selected = false,
  ...props
}: EventTypeCardProps) {
  return (
    <Card
      className={cn(
        "amro-event-type-card",
        selected && "amro-event-type-card--selected",
        className
      )}
      {...props}
    >
      <header>
        <span>
          {event.channel === "video" ? <Video aria-hidden="true" /> : <Phone aria-hidden="true" />}
        </span>
        <span>
          <strong>{event.label}</strong>
          <small>{event.description}</small>
        </span>
        {selected && (
          <Badge tone="success">
            <Check aria-hidden="true" />
            Selected
          </Badge>
        )}
      </header>
      <div>
        <Badge tone="neutral">
          <Clock3 aria-hidden="true" />
          {event.duration} minutes
        </Badge>
        <Badge tone="neutral">
          <UserRound aria-hidden="true" />
          {host}
        </Badge>
      </div>
      <ul>
        {event.inclusions?.map((item, index) => (
          <li key={index}>
            <Check aria-hidden="true" />
            {item}
          </li>
        ))}
      </ul>
      {onSelect && (
        <Button onClick={() => onSelect(event)} variant={selected ? "secondary" : "primary"}>
          {selected ? "Selected" : "Choose event"}
        </Button>
      )}
    </Card>
  );
}

export interface DateAvailabilityCellProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  date?: number;
  availability?: "none" | "low" | "medium" | "high";
  selected?: boolean;
  today?: boolean;
  outsideMonth?: boolean;
  slotCount?: number;
}
export function DateAvailabilityCell({
  availability = "high",
  className,
  date = 12,
  outsideMonth = false,
  selected = false,
  slotCount = 8,
  today = false,
  ...props
}: DateAvailabilityCellProps) {
  const disabled = props.disabled || availability === "none" || outsideMonth;
  return (
    <button
      aria-label={`${date}, ${slotCount} available slots`}
      aria-pressed={selected}
      className={cn("amro-date-cell", className)}
      data-availability={availability}
      data-today={today}
      disabled={disabled}
      type="button"
      {...props}
    >
      <span>{date}</span>
      {!outsideMonth && availability !== "none" && <i aria-hidden="true" />}
      {slotCount > 0 && !disabled && <small>{slotCount}</small>}
    </button>
  );
}

export interface MeetingSlot {
  id: string;
  label: ReactNode;
  period: "morning" | "afternoon" | "evening";
  timezone?: ReactNode;
  available?: boolean;
  recommended?: boolean;
}
export interface TimeSlotListProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  slots?: readonly MeetingSlot[];
  value?: string;
  timezone?: ReactNode;
  onSelect?: (slot: MeetingSlot) => void;
}
const meetingSlots: readonly MeetingSlot[] = [
  { id: "0930", label: "09:30", period: "morning", available: true },
  { id: "1030", label: "10:30", period: "morning", available: true, recommended: true },
  { id: "1130", label: "11:30", period: "morning", available: false },
  { id: "1400", label: "14:00", period: "afternoon", available: true },
  { id: "1530", label: "15:30", period: "afternoon", available: true },
  { id: "1700", label: "17:00", period: "evening", available: true }
];
export function TimeSlotList({
  className,
  onSelect,
  slots = meetingSlots,
  timezone = "Europe/Helsinki",
  value,
  ...props
}: TimeSlotListProps) {
  return (
    <div className={cn("amro-time-slots", className)} {...props}>
      <header>
        <span>
          <strong>Available times</strong>
          <small>{timezone}</small>
        </span>
        <Badge tone="neutral">
          {slots.filter((slot) => slot.available !== false).length} slots
        </Badge>
      </header>
      {(["morning", "afternoon", "evening"] as const).map((period) => {
        const group = slots.filter((slot) => slot.period === period);
        return group.length ? (
          <section key={period}>
            <h3>{period}</h3>
            <div>
              {group.map((slot) => (
                <button
                  aria-pressed={value === slot.id}
                  disabled={slot.available === false}
                  key={slot.id}
                  onClick={() => onSelect?.(slot)}
                  type="button"
                >
                  <strong>{slot.label}</strong>
                  {slot.recommended && <small>Best fit</small>}
                </button>
              ))}
            </div>
          </section>
        ) : null;
      })}
    </div>
  );
}

export interface TimezonePillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  timezone?: string;
  detected?: boolean;
  options?: readonly string[];
  onChange?: (timezone: string) => void;
}
export function TimezonePill({
  className,
  detected = true,
  onChange,
  options = ["Europe/Helsinki", "Europe/London", "America/New_York", "Asia/Kolkata"],
  timezone = "Europe/Helsinki",
  ...props
}: TimezonePillProps) {
  const [editing, setEditing] = useState(false);
  return (
    <div className={cn("amro-timezone-pill", className)} {...props}>
      <Globe2 aria-hidden="true" />
      {editing ? (
        <Select
          aria-label="Timezone"
          autoFocus
          onBlur={() => setEditing(false)}
          onChange={(event) => {
            onChange?.(event.target.value);
            setEditing(false);
          }}
          value={timezone}
        >
          {options.map((option) => (
            <option key={option}>{option}</option>
          ))}
        </Select>
      ) : (
        <button onClick={() => setEditing(true)} type="button">
          <span>{timezone}</span>
          <small>{detected ? "Automatically detected" : "Custom timezone"}</small>
          <ChevronRight aria-hidden="true" />
        </button>
      )}
    </div>
  );
}

export type BookingStep = "event" | "date" | "time" | "details" | "confirmed";
export interface BookingStepHeaderProps extends HTMLAttributes<HTMLOListElement> {
  current?: BookingStep;
  completed?: readonly BookingStep[];
  onStepSelect?: (step: BookingStep) => void;
}
const bookingSteps: readonly { id: BookingStep; label: string }[] = [
  { id: "event", label: "Event" },
  { id: "date", label: "Date" },
  { id: "time", label: "Time" },
  { id: "details", label: "Details" },
  { id: "confirmed", label: "Confirmed" }
];
export function BookingStepHeader({
  className,
  completed = ["event", "date"],
  current = "time",
  onStepSelect,
  ...props
}: BookingStepHeaderProps) {
  return (
    <ol className={cn("amro-booking-steps", className)} {...props}>
      {bookingSteps.map((step, index) => {
        const done = completed.includes(step.id);
        const active = current === step.id;
        return (
          <li data-active={active} data-complete={done} key={step.id}>
            <button
              aria-current={active ? "step" : undefined}
              disabled={!done && !active}
              onClick={() => onStepSelect?.(step.id)}
              type="button"
            >
              <span>{done ? <Check aria-hidden="true" /> : index + 1}</span>
              <strong>{step.label}</strong>
            </button>
          </li>
        );
      })}
    </ol>
  );
}

export interface BookingDetails {
  name: string;
  email: string;
  organisation: string;
  reason: string;
  consent: boolean;
}
export interface BookingDetailsFormProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<BookingDetails>;
  onSubmit?: (details: BookingDetails) => void;
}
export function BookingDetailsForm({
  className,
  defaultValue,
  onSubmit,
  ...props
}: BookingDetailsFormProps) {
  const [details, setDetails] = useState<BookingDetails>({
    name: defaultValue?.name ?? "",
    email: defaultValue?.email ?? "",
    organisation: defaultValue?.organisation ?? "",
    reason: defaultValue?.reason ?? "",
    consent: defaultValue?.consent ?? false
  });
  const update = <K extends keyof BookingDetails>(key: K, value: BookingDetails[K]) =>
    setDetails((current) => ({ ...current, [key]: value }));
  const valid =
    details.name.trim().length > 1 &&
    /^\S+@\S+\.\S+$/.test(details.email) &&
    details.reason.trim().length > 3;
  return (
    <form
      className={cn("amro-booking-details", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (valid) onSubmit?.(details);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Your details"
        title="Help the host prepare"
        description="No account is created."
      >
        <div>
          <Input
            label="Name"
            value={details.name}
            onChange={(event) => update("name", event.target.value)}
          />
          <Input
            label="Work email"
            type="email"
            value={details.email}
            onChange={(event) => update("email", event.target.value)}
          />
          <Input
            label="Organisation (optional)"
            value={details.organisation}
            onChange={(event) => update("organisation", event.target.value)}
          />
          <label>
            <span>Meeting reason</span>
            <Textarea
              onChange={(event) => update("reason", event.target.value)}
              value={details.reason}
            />
          </label>
        </div>
        <label className="amro-booking-details__consent">
          <input
            checked={details.consent}
            onChange={(event) => update("consent", event.target.checked)}
            type="checkbox"
          />
          Send me the calendar invitation and meeting follow-up.
        </label>
        <footer>
          <span>
            <ShieldCheck aria-hidden="true" />
            Your reason is shared only with the assigned host.
          </span>
          <Button disabled={!valid} type="submit">
            Review booking
            <ArrowRight aria-hidden="true" />
          </Button>
        </footer>
      </FeaturePanel>
    </form>
  );
}

export interface MeetingReason {
  intent: ReactNode;
  outcome?: ReactNode;
  urgency?: "today" | "this-week" | "flexible";
  topics?: readonly ReactNode[];
  notes?: ReactNode;
}
export interface MeetingReasonCardProps extends HTMLAttributes<HTMLDivElement> {
  reason?: MeetingReason;
  onEdit?: () => void;
}
const sampleMeetingReason: MeetingReason = {
  intent: "Evaluate AmroAgents for customer operations",
  outcome: "Agree whether a pilot is a fit",
  urgency: "this-week",
  topics: ["Human approval", "CRM integration", "Outcome measurement"],
  notes: "Team of 35 support specialists."
};
export function MeetingReasonCard({
  className,
  onEdit,
  reason = sampleMeetingReason,
  ...props
}: MeetingReasonCardProps) {
  return (
    <Card className={cn("amro-meeting-reason", className)} {...props}>
      <header>
        <span>
          <MessageSquare aria-hidden="true" />
        </span>
        <span>
          <span className="amro-eyebrow">Meeting intent</span>
          <strong>{reason.intent}</strong>
          <small>Urgency: {reason.urgency}</small>
        </span>
        {onEdit && (
          <Button onClick={onEdit} size="sm" variant="tertiary">
            Edit
          </Button>
        )}
      </header>
      {reason.outcome && (
        <div>
          <small>Desired outcome</small>
          <strong>{reason.outcome}</strong>
        </div>
      )}
      <div className="amro-meeting-reason__topics">
        {reason.topics?.map((topic, index) => (
          <Badge key={index} tone="neutral">
            {topic}
          </Badge>
        ))}
      </div>
      {reason.notes && <p>{reason.notes}</p>}
    </Card>
  );
}

export type SourceProduct = "agents" | "gen" | "pilot" | "academy" | "vision" | "direct";
export interface SourceContextChipProps extends HTMLAttributes<HTMLSpanElement> {
  source?: SourceProduct;
  label?: ReactNode;
  contextCount?: number;
}
const sourceLabels: Record<SourceProduct, string> = {
  agents: "AmroAgents",
  gen: "AmroGen",
  pilot: "AmroPilot",
  academy: "AmroAcademy",
  vision: "AmroVisionAI",
  direct: "Direct booking"
};
export function SourceContextChip({
  className,
  contextCount = 3,
  label,
  source = "agents",
  ...props
}: SourceContextChipProps) {
  return (
    <span
      className={cn("amro-source-context", `amro-source-context--${source}`, className)}
      {...props}
    >
      <Bot aria-hidden="true" />
      <span>
        <strong>{label ?? sourceLabels[source]}</strong>
        <small>{contextCount} context items carried in</small>
      </span>
    </span>
  );
}

export interface BriefEvidence {
  id: string;
  label: ReactNode;
  value: ReactNode;
  source?: ReactNode;
}
export interface AIMeetingBriefProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  guest?: ReactNode;
  summary?: ReactNode;
  goals?: readonly ReactNode[];
  evidence?: readonly BriefEvidence[];
  risks?: readonly ReactNode[];
  source?: SourceProduct;
  onRefresh?: () => void;
}
export function AIMeetingBrief({
  className,
  evidence = [
    { id: "team", label: "Team", value: "35 support specialists", source: "Guest reason" },
    { id: "stack", label: "CRM", value: "HubSpot", source: "Agent conversation" },
    { id: "priority", label: "Priority", value: "Human approval", source: "Selected topic" }
  ],
  goals = ["Assess pilot fit", "Validate CRM workflow", "Define a measurable first outcome"],
  guest = "Alex Morgan · Northstar Labs",
  onRefresh,
  risks = ["Needs legal review for outbound automation"],
  source = "agents",
  summary = "Northstar is evaluating governed AI support automation for a 35-person team. The guest wants a practical pilot path with visible human controls.",
  title = "AI pre-call brief",
  ...props
}: AIMeetingBriefProps) {
  return (
    <FeaturePanel
      className={cn("amro-ai-meeting-brief", className)}
      eyebrow="Prepared for the host"
      title={title}
      description={guest}
      status={<SourceContextChip contextCount={evidence.length} source={source} />}
      actions={
        onRefresh && (
          <Button onClick={onRefresh} size="sm" variant="tertiary">
            <RefreshCw aria-hidden="true" />
            Refresh
          </Button>
        )
      }
      {...props}
    >
      <section>
        <Sparkles aria-hidden="true" />
        <p>{summary}</p>
      </section>
      <div className="amro-ai-meeting-brief__columns">
        <div>
          <strong>Meeting goals</strong>
          <ol>
            {goals.map((goal, index) => (
              <li key={index}>
                <span>{index + 1}</span>
                {goal}
              </li>
            ))}
          </ol>
        </div>
        <div>
          <strong>Known context</strong>
          <dl>
            {evidence.map((item) => (
              <div key={item.id}>
                <dt>{item.label}</dt>
                <dd>
                  {item.value}
                  <small>{item.source}</small>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
      {risks.length > 0 && (
        <footer>
          {risks.map((risk, index) => (
            <span key={index}>
              <AlertTriangle aria-hidden="true" />
              {risk}
            </span>
          ))}
        </footer>
      )}
    </FeaturePanel>
  );
}

export interface BookingSummaryCardProps extends HTMLAttributes<HTMLDivElement> {
  event?: MeetingEventType;
  host?: string;
  hostAvatarUrl?: string;
  date?: ReactNode;
  timezone?: ReactNode;
  method?: ReactNode;
  guest?: ReactNode;
  onEdit?: (section: "event" | "date" | "guest") => void;
}
export function BookingSummaryCard({
  className,
  date = "Tuesday, 12 August · 15:30–16:00",
  event = eventTypes[0]!,
  guest = "alex@northstar.example",
  host = "Maya Chen",
  hostAvatarUrl,
  method = "Google Meet",
  onEdit,
  timezone = "Europe/Helsinki",
  ...props
}: BookingSummaryCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-booking-summary", className)}
      eyebrow="Review booking"
      title={event.label}
      description={event.description}
      status={
        <Badge tone="neutral">
          <Clock3 aria-hidden="true" />
          {event.duration} min
        </Badge>
      }
      {...props}
    >
      <dl>
        <div>
          <dt>
            <UserRound aria-hidden="true" />
            Host
          </dt>
          <dd>
            <Avatar name={host} {...(hostAvatarUrl ? { src: hostAvatarUrl } : {})} />
            <span>
              <strong>{host}</strong>
              <small>{method}</small>
            </span>
          </dd>
        </div>
        <div>
          <dt>
            <CalendarDays aria-hidden="true" />
            Date and time
          </dt>
          <dd>
            <span>
              <strong>{date}</strong>
              <small>{timezone}</small>
            </span>
            {onEdit && (
              <Button onClick={() => onEdit("date")} size="sm" variant="tertiary">
                Change
              </Button>
            )}
          </dd>
        </div>
        <div>
          <dt>
            <Mail aria-hidden="true" />
            Guest
          </dt>
          <dd>
            <span>
              <strong>{guest}</strong>
              <small>Calendar invitation recipient</small>
            </span>
            {onEdit && (
              <Button onClick={() => onEdit("guest")} size="sm" variant="tertiary">
                Edit
              </Button>
            )}
          </dd>
        </div>
      </dl>
    </FeaturePanel>
  );
}

export interface ConfirmationCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
  event?: ReactNode;
  host?: ReactNode;
  date?: ReactNode;
  timezone?: ReactNode;
  joinUrl?: string;
  calendarStatus?: "adding" | "added" | "failed";
  emailStatus?: "sending" | "sent" | "failed";
  onJoin?: () => void;
  onCopy?: (url: string) => void;
  onReschedule?: () => void;
  onCancel?: () => void;
}
export function ConfirmationCard({
  calendarStatus = "added",
  className,
  date = "Tuesday, 12 August · 15:30–16:00",
  emailStatus = "sent",
  event = "Consultation",
  host = "Maya Chen",
  joinUrl = "https://meet.google.com/amro-booking",
  onCancel,
  onCopy,
  onJoin,
  onReschedule,
  timezone = "Europe/Helsinki",
  ...props
}: ConfirmationCardProps) {
  return (
    <div className={cn("amro-confirmation-card", className)} {...props}>
      <header>
        <span>
          <Check aria-hidden="true" />
        </span>
        <span>
          <span className="amro-eyebrow">Booking confirmed</span>
          <h2>
            {event} with {host}
          </h2>
          <p>
            {date} · {timezone}
          </p>
        </span>
      </header>
      <div className="amro-confirmation-card__link">
        <Video aria-hidden="true" />
        <code>{joinUrl}</code>
        <Button
          aria-label="Copy meeting link"
          onClick={() => onCopy?.(joinUrl)}
          size="sm"
          variant="secondary"
        >
          <Copy aria-hidden="true" />
        </Button>
      </div>
      <div className="amro-confirmation-card__status">
        <StatusIndicator
          label={`Calendar ${calendarStatus}`}
          status={
            calendarStatus === "added"
              ? "success"
              : calendarStatus === "adding"
                ? "loading"
                : "error"
          }
        />
        <StatusIndicator
          label={`Email ${emailStatus}`}
          status={
            emailStatus === "sent" ? "success" : emailStatus === "sending" ? "loading" : "error"
          }
        />
      </div>
      <footer>
        {onJoin && (
          <Button onClick={onJoin}>
            Join meeting
            <ExternalLink aria-hidden="true" />
          </Button>
        )}
        {onReschedule && (
          <Button onClick={onReschedule} variant="secondary">
            Reschedule
          </Button>
        )}
        {onCancel && (
          <Button onClick={onCancel} variant="tertiary">
            Cancel booking
          </Button>
        )}
      </footer>
    </div>
  );
}

export interface DeliveryStep {
  id: "host-event" | "guest-invite" | "meet-link";
  label: ReactNode;
  status: "pending" | "working" | "complete" | "error";
  detail?: ReactNode;
}
export interface CalendarDeliveryStatusProps extends HTMLAttributes<HTMLDivElement> {
  steps?: readonly DeliveryStep[];
  onRetry?: (step: DeliveryStep) => void;
}
const deliverySteps: readonly DeliveryStep[] = [
  {
    id: "host-event",
    label: "Host calendar event created",
    status: "complete",
    detail: "Google Calendar"
  },
  {
    id: "guest-invite",
    label: "Guest invitation sent",
    status: "complete",
    detail: "alex@northstar.example"
  },
  {
    id: "meet-link",
    label: "Google Meet attached",
    status: "complete",
    detail: "Secure joining link"
  }
];
export function CalendarDeliveryStatus({
  className,
  onRetry,
  steps = deliverySteps,
  ...props
}: CalendarDeliveryStatusProps) {
  const ready = steps.every((step) => step.status === "complete");
  return (
    <FeaturePanel
      className={cn("amro-delivery-status", className)}
      eyebrow="Calendar delivery"
      title={ready ? "Everything is ready" : "Preparing your invitation"}
      status={
        <StatusIndicator
          label={ready ? "Complete" : "In progress"}
          status={ready ? "success" : "loading"}
        />
      }
      {...props}
    >
      <ol>
        {steps.map((step) => (
          <li key={step.id}>
            <span>
              {step.status === "complete" ? (
                <Check aria-hidden="true" />
              ) : step.status === "error" ? (
                <X aria-hidden="true" />
              ) : (
                <RefreshCw aria-hidden="true" />
              )}
            </span>
            <span>
              <strong>{step.label}</strong>
              <small>{step.detail}</small>
            </span>
            <StatusIndicator
              label={step.status}
              status={step.status === "working" ? "loading" : step.status}
            />
            {step.status === "error" && onRetry && (
              <Button onClick={() => onRetry(step)} size="sm" variant="secondary">
                Retry
              </Button>
            )}
          </li>
        ))}
      </ol>
    </FeaturePanel>
  );
}

export interface ReschedulePanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  event?: ReactNode;
  host?: ReactNode;
  currentSlot?: ReactNode;
  timezone?: ReactNode;
  newSlots?: readonly MeetingSlot[];
  value?: string;
  preserveContext?: boolean;
  onSelect?: (slot: MeetingSlot) => void;
  onConfirm?: (slot: MeetingSlot) => void;
  onClose?: () => void;
}
export function ReschedulePanel({
  className,
  currentSlot = "12 Aug · 15:30",
  event = "Consultation",
  host = "Maya Chen",
  newSlots = meetingSlots.filter((slot) => slot.available !== false).slice(0, 4),
  onClose,
  onConfirm,
  onSelect,
  preserveContext = true,
  timezone = "Europe/Helsinki",
  value: controlled,
  ...props
}: ReschedulePanelProps) {
  const [internal, setInternal] = useState<string>();
  const value = controlled ?? internal;
  const selected = newSlots.find((slot) => slot.id === value);
  return (
    <div className={cn("amro-reschedule-panel", className)} {...props}>
      <header>
        <span>
          <strong>Reschedule meeting</strong>
          <small>
            {event} with {host}
          </small>
        </span>
        {onClose && (
          <button aria-label="Close reschedule panel" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <div className="amro-reschedule-panel__current">
        <small>Current time</small>
        <del>{currentSlot}</del>
        <Badge tone="neutral">{timezone}</Badge>
      </div>
      <section>
        <strong>Choose a new time</strong>
        <div>
          {newSlots.map((slot) => (
            <button
              aria-pressed={slot.id === value}
              key={slot.id}
              onClick={() => {
                setInternal(slot.id);
                onSelect?.(slot);
              }}
              type="button"
            >
              <span>{slot.label}</span>
              <small>{slot.period}</small>
            </button>
          ))}
        </div>
      </section>
      {preserveContext && (
        <p>
          <Check aria-hidden="true" />
          Guest details, meeting reason, source context, and host stay unchanged.
        </p>
      )}
      <footer>
        <Button disabled={!selected} onClick={() => selected && onConfirm?.(selected)}>
          Confirm new time
        </Button>
      </footer>
    </div>
  );
}

export interface CancellationReasonDialogProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onSubmit"
> {
  open?: boolean;
  reasons?: readonly string[];
  onSubmit?: (reason: string, note: string) => void;
  onClose?: () => void;
  onReschedule?: () => void;
}
export function CancellationReasonDialog({
  className,
  onClose,
  onReschedule,
  onSubmit,
  open = true,
  reasons = [
    "No longer needed",
    "Schedule conflict",
    "Booked by mistake",
    "Need a different event type",
    "Other"
  ],
  ...props
}: CancellationReasonDialogProps) {
  const [reason, setReason] = useState("");
  const [note, setNote] = useState("");
  if (!open) return null;
  return (
    <div
      className={cn("amro-cancel-dialog", className)}
      role="dialog"
      aria-modal="true"
      aria-label="Cancel meeting"
      {...props}
    >
      <header>
        <span>
          <strong>Cancel this meeting?</strong>
          <small>Your reason helps the host improve availability.</small>
        </span>
        {onClose && (
          <button aria-label="Close cancellation dialog" onClick={onClose} type="button">
            <X aria-hidden="true" />
          </button>
        )}
      </header>
      <fieldset>
        <legend>Reason</legend>
        {reasons.map((item) => (
          <label key={item}>
            <input
              checked={reason === item}
              name="cancel-reason"
              onChange={() => setReason(item)}
              type="radio"
            />
            {item}
          </label>
        ))}
      </fieldset>
      {reason === "Other" && (
        <Input
          label="Optional note"
          onChange={(event) => setNote(event.target.value)}
          value={note}
        />
      )}
      <div>
        <CalendarDays aria-hidden="true" />
        <span>
          <strong>Could another time work?</strong>
          <small>Rescheduling keeps all meeting context.</small>
        </span>
        {onReschedule && (
          <Button onClick={onReschedule} size="sm" variant="secondary">
            Reschedule instead
          </Button>
        )}
      </div>
      <footer>
        <Button onClick={onClose} variant="secondary">
          Keep meeting
        </Button>
        <Button disabled={!reason} onClick={() => onSubmit?.(reason, note)}>
          Cancel meeting
        </Button>
      </footer>
    </div>
  );
}

export interface AvailabilityRule {
  day: string;
  enabled: boolean;
  start: string;
  end: string;
  breaks: readonly { start: string; end: string }[];
}
export interface AvailabilityOverride {
  date: string;
  available: boolean;
  start?: string;
  end?: string;
}
export interface AvailabilityRulesEditorProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onChange"
> {
  rules?: readonly AvailabilityRule[];
  overrides?: readonly AvailabilityOverride[];
  onChange?: (rules: readonly AvailabilityRule[]) => void;
  onOverrideChange?: (overrides: readonly AvailabilityOverride[]) => void;
}
const availabilityRules: readonly AvailabilityRule[] = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday"
].map((day, index) => ({
  day,
  enabled: index < 5,
  start: "09:00",
  end: "17:00",
  breaks: index < 5 ? [{ start: "12:00", end: "13:00" }] : []
}));
export function AvailabilityRulesEditor({
  className,
  onChange,
  onOverrideChange,
  overrides = [{ date: "2026-08-15", available: false }],
  rules = availabilityRules,
  ...props
}: AvailabilityRulesEditorProps) {
  const [items, setItems] = useState([...rules]);
  const [special, setSpecial] = useState([...overrides]);
  const update = (index: number, patch: Partial<AvailabilityRule>) => {
    const next = items.map((item, itemIndex) =>
      itemIndex === index ? { ...item, ...patch } : item
    );
    setItems(next);
    onChange?.(next);
  };
  return (
    <div className={cn("amro-rules-editor", className)} {...props}>
      <header>
        <span>
          <strong>Availability rules</strong>
          <small>Working hours, breaks, and date overrides</small>
        </span>
        <Badge tone="success">{items.filter((item) => item.enabled).length} active days</Badge>
      </header>
      <div>
        {items.map((rule, index) => (
          <article data-enabled={rule.enabled} key={rule.day}>
            <label>
              <input
                checked={rule.enabled}
                onChange={(event) => update(index, { enabled: event.target.checked })}
                type="checkbox"
              />
              <strong>{rule.day}</strong>
            </label>
            <input
              aria-label={`${rule.day} start`}
              disabled={!rule.enabled}
              onChange={(event) => update(index, { start: event.target.value })}
              value={rule.start}
            />
            <span>to</span>
            <TimeInput
              aria-label={`${rule.day} end`}
              disabled={!rule.enabled}
              onChange={(event) => update(index, { end: event.target.value })}
              value={rule.end}
            />
            <small>{rule.breaks.length ? `${rule.breaks.length} break` : "No breaks"}</small>
          </article>
        ))}
      </div>
      <section>
        <header>
          <strong>Date overrides</strong>
          <small>Specific dates take priority</small>
        </header>
        {special.map((override, index) => (
          <div key={override.date}>
            <DateInput
              aria-label="Override date"
              onChange={(event) => {
                const next = special.map((item, itemIndex) =>
                  itemIndex === index ? { ...item, date: event.target.value } : item
                );
                setSpecial(next);
                onOverrideChange?.(next);
              }}
              value={override.date}
            />
            <Select
              aria-label="Override availability"
              onChange={(event) => {
                const next = special.map((item, itemIndex) =>
                  itemIndex === index
                    ? { ...item, available: event.target.value === "available" }
                    : item
                );
                setSpecial(next);
                onOverrideChange?.(next);
              }}
              value={override.available ? "available" : "unavailable"}
            >
              <option value="available">Available</option>
              <option value="unavailable">Unavailable</option>
            </Select>
          </div>
        ))}
      </section>
    </div>
  );
}

export interface ConflictIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  type?: "calendar" | "buffer" | "limit" | "outside-hours";
  title?: ReactNode;
  detail?: ReactNode;
  calendar?: ReactNode;
  conflictingEvent?: ReactNode;
  onViewAlternative?: () => void;
}
export function ConflictIndicator({
  calendar = "Work calendar",
  className,
  conflictingEvent = "Customer review",
  detail = "14:00–14:30 overlaps an existing event and its 10-minute buffer.",
  onViewAlternative,
  title = "This time is unavailable",
  type = "calendar",
  ...props
}: ConflictIndicatorProps) {
  return (
    <div className={cn("amro-conflict-indicator", className)} role="status" {...props}>
      <AlertTriangle aria-hidden="true" />
      <span>
        <span className="amro-eyebrow">{type} conflict</span>
        <strong>{title}</strong>
        <p>{detail}</p>
        {type === "calendar" && (
          <span>
            <Badge tone="neutral">{calendar}</Badge>
            <span>{conflictingEvent}</span>
          </span>
        )}
      </span>
      {onViewAlternative && (
        <Button onClick={onViewAlternative} size="sm" variant="secondary">
          Find next available
        </Button>
      )}
    </div>
  );
}

export interface BufferTimeControlProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  before?: number;
  after?: number;
  options?: readonly number[];
  onChange?: (value: { before: number; after: number }) => void;
}
export function BufferTimeControl({
  after: initialAfter = 10,
  before: initialBefore = 10,
  className,
  onChange,
  options = [0, 5, 10, 15, 30],
  ...props
}: BufferTimeControlProps) {
  const [before, setBefore] = useState(initialBefore);
  const [after, setAfter] = useState(initialAfter);
  const update = (key: "before" | "after", value: number) => {
    if (key === "before") setBefore(value);
    else setAfter(value);
    onChange?.({
      before: key === "before" ? value : before,
      after: key === "after" ? value : after
    });
  };
  return (
    <fieldset className={cn("amro-buffer-control", className)} {...props}>
      <legend>Protect time around meetings</legend>
      <label>
        <span>
          <strong>Before meeting</strong>
          <small>Preparation and transition</small>
        </span>
        <Select onChange={(event) => update("before", Number(event.target.value))} value={before}>
          {options.map((value) => (
            <option key={value} value={value}>
              {value} min
            </option>
          ))}
        </Select>
      </label>
      <div aria-hidden="true">
        <span>{before}m</span>
        <Video aria-hidden="true" />
        <span>{after}m</span>
      </div>
      <label>
        <span>
          <strong>After meeting</strong>
          <small>Notes and recovery</small>
        </span>
        <Select onChange={(event) => update("after", Number(event.target.value))} value={after}>
          {options.map((value) => (
            <option key={value} value={value}>
              {value} min
            </option>
          ))}
        </Select>
      </label>
    </fieldset>
  );
}

export interface MeetingLimitCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  dailyLimit?: number;
  weeklyLimit?: number;
  bookedToday?: number;
  bookedThisWeek?: number;
  onChange?: (limits: { daily: number; weekly: number }) => void;
}
export function MeetingLimitCard({
  bookedThisWeek = 12,
  bookedToday = 3,
  className,
  dailyLimit: initialDaily = 5,
  onChange,
  weeklyLimit: initialWeekly = 20,
  ...props
}: MeetingLimitCardProps) {
  const [daily, setDaily] = useState(initialDaily);
  const [weekly, setWeekly] = useState(initialWeekly);
  return (
    <FeaturePanel
      className={cn("amro-meeting-limit", className)}
      eyebrow="Booking limits"
      title="Protect host capacity"
      description="Slots close automatically when a cap is reached."
      {...props}
    >
      <div>
        <section>
          <span>
            <strong>
              {bookedToday}/{daily}
            </strong>
            <small>Meetings today</small>
          </span>
          <progress max={daily} value={bookedToday} />
          <label>
            Daily cap
            <input
              min="1"
              onChange={(event) => {
                const value = Number(event.target.value);
                setDaily(value);
                onChange?.({ daily: value, weekly });
              }}
              type="number"
              value={daily}
            />
          </label>
        </section>
        <section>
          <span>
            <strong>
              {bookedThisWeek}/{weekly}
            </strong>
            <small>Meetings this week</small>
          </span>
          <progress max={weekly} value={bookedThisWeek} />
          <label>
            Weekly cap
            <input
              min="1"
              onChange={(event) => {
                const value = Number(event.target.value);
                setWeekly(value);
                onChange?.({ daily, weekly: value });
              }}
              type="number"
              value={weekly}
            />
          </label>
        </section>
      </div>
    </FeaturePanel>
  );
}

export interface BookingPagePreviewProps extends HTMLAttributes<HTMLDivElement> {
  event?: MeetingEventType;
  host?: string;
  theme?: "light" | "dark";
  accent?: "teal" | "cyan";
  compact?: boolean;
  onOpen?: () => void;
}
export function BookingPagePreview({
  accent = "teal",
  className,
  compact = false,
  event = eventTypes[0]!,
  host = "Maya Chen",
  onOpen,
  theme = "dark",
  ...props
}: BookingPagePreviewProps) {
  return (
    <div
      className={cn("amro-booking-preview", compact && "amro-booking-preview--compact", className)}
      data-accent={accent}
      data-preview-theme={theme}
      {...props}
    >
      <header>
        <span>
          <strong>Public booking preview</strong>
          <small>Live representation of the guest experience</small>
        </span>
        {onOpen && (
          <Button onClick={onOpen} size="sm" variant="secondary">
            Open page
            <ExternalLink aria-hidden="true" />
          </Button>
        )}
      </header>
      <div>
        <aside>
          <Avatar name={host} />
          <strong>{host}</strong>
          <small>{event.label}</small>
          <p>{event.description}</p>
          <span>
            <Clock3 aria-hidden="true" />
            {event.duration} min
          </span>
          <span>
            <Video aria-hidden="true" />
            Google Meet
          </span>
        </aside>
        <main>
          <BookingStepHeader current="date" completed={["event"]} />
          <div className="amro-booking-preview__calendar">
            <CalendarDays aria-hidden="true" />
            <strong>August 2026</strong>
            <p>Choose an available date to continue.</p>
            <div>
              {[10, 11, 12, 13, 14].map((date, index) => (
                <DateAvailabilityCell
                  availability={index === 1 ? "low" : index === 3 ? "medium" : "high"}
                  date={date}
                  key={date}
                  slotCount={index + 3}
                />
              ))}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

export interface EmbedSettings {
  theme: "light" | "dark" | "auto";
  eventId: EventTypeId;
  height: number;
  hideHeader: boolean;
}
export interface EmbedConfiguratorProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onChange" | "onCopy"
> {
  value?: EmbedSettings;
  onChange?: (settings: EmbedSettings) => void;
  onCopy?: (code: string) => void;
}
export function EmbedConfigurator({
  className,
  onChange,
  onCopy,
  value = { theme: "auto", eventId: "consultation", height: 680, hideHeader: false },
  ...props
}: EmbedConfiguratorProps) {
  const [settings, setSettings] = useState(value);
  const update = <K extends keyof EmbedSettings>(key: K, next: EmbedSettings[K]) => {
    const updated = { ...settings, [key]: next };
    setSettings(updated);
    onChange?.(updated);
  };
  const code = `<iframe src="https://amro-ui.vercel.app/embed/${settings.eventId}?theme=${settings.theme}${settings.hideHeader ? "&header=0" : ""}" width="100%" height="${settings.height}" loading="lazy"></iframe>`;
  return (
    <div className={cn("amro-embed-config", className)} {...props}>
      <header>
        <span>
          <Code2 aria-hidden="true" />
          <span>
            <strong>Embed configurator</strong>
            <small>Generate a responsive AmroMeet embed</small>
          </span>
        </span>
        <Button onClick={() => onCopy?.(code)} size="sm" variant="secondary">
          <Copy aria-hidden="true" />
          Copy code
        </Button>
      </header>
      <div className="amro-embed-config__controls">
        <label>
          Theme
          <Select
            onChange={(event) => update("theme", event.target.value as EmbedSettings["theme"])}
            value={settings.theme}
          >
            <option value="auto">Match system</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </Select>
        </label>
        <label>
          Event
          <Select
            onChange={(event) => update("eventId", event.target.value as EventTypeId)}
            value={settings.eventId}
          >
            {eventTypes.map((event) => (
              <option key={event.id} value={event.id}>
                {event.label}
              </option>
            ))}
          </Select>
        </label>
        <label>
          Height
          <input
            min="480"
            onChange={(event) => update("height", Number(event.target.value))}
            type="number"
            value={settings.height}
          />
        </label>
        <label>
          <input
            checked={settings.hideHeader}
            onChange={(event) => update("hideHeader", event.target.checked)}
            type="checkbox"
          />
          Hide product header
        </label>
      </div>
      <pre>
        <code>{code}</code>
      </pre>
    </div>
  );
}

export interface CalendarConnectionCardProps extends HTMLAttributes<HTMLDivElement> {
  provider?: ReactNode;
  account?: ReactNode;
  status?: "healthy" | "syncing" | "attention" | "disconnected";
  lastSynced?: ReactNode;
  calendars?: number;
  onReconnect?: () => void;
  onManage?: () => void;
}
export function CalendarConnectionCard({
  account = "maya@northstar.example",
  calendars = 3,
  className,
  lastSynced = "Synced 2 minutes ago",
  onManage,
  onReconnect,
  provider = "Google Calendar",
  status = "healthy",
  ...props
}: CalendarConnectionCardProps) {
  return (
    <Card className={cn("amro-calendar-connection", className)} {...props}>
      <header>
        <span>
          <CalendarCheck aria-hidden="true" />
        </span>
        <span>
          <strong>{provider}</strong>
          <small>{account}</small>
        </span>
        <StatusIndicator
          label={status}
          status={
            status === "healthy"
              ? "online"
              : status === "syncing"
                ? "loading"
                : status === "attention"
                  ? "warning"
                  : "offline"
          }
        />
      </header>
      <div>
        <span>
          <Wifi aria-hidden="true" />
          <strong>{calendars}</strong>
          <small>calendars checked for conflicts</small>
        </span>
        <span>
          <RefreshCw aria-hidden="true" />
          <strong>{lastSynced}</strong>
          <small>two-way availability sync</small>
        </span>
      </div>
      <footer>
        {status === "disconnected" && onReconnect ? (
          <Button onClick={onReconnect}>Reconnect calendar</Button>
        ) : (
          onManage && (
            <Button onClick={onManage} variant="secondary">
              Manage calendars
            </Button>
          )
        )}
      </footer>
    </Card>
  );
}

export type RoutingMode = "individual" | "round-robin" | "specialist";
export interface RoutingHost {
  id: string;
  name: string;
  role?: ReactNode;
  availability?: HostAvailability;
  weight?: number;
}
export interface HostRoutingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  mode?: RoutingMode;
  hosts?: readonly RoutingHost[];
  onChange?: (mode: RoutingMode) => void;
  onManageHosts?: () => void;
}
const routingHosts: readonly RoutingHost[] = [
  { id: "maya", name: "Maya Chen", role: "AI operations", availability: "available", weight: 1 },
  { id: "alex", name: "Alex Morgan", role: "Product demos", availability: "busy", weight: 1 },
  { id: "sam", name: "Sam Wilson", role: "Technical support", availability: "available", weight: 1 }
];
export function HostRoutingCard({
  className,
  hosts = routingHosts,
  mode: controlled,
  onChange,
  onManageHosts,
  ...props
}: HostRoutingCardProps) {
  const [internal, setInternal] = useState<RoutingMode>("round-robin");
  const mode = controlled ?? internal;
  const modes: readonly { id: RoutingMode; label: string; detail: string }[] = [
    { id: "individual", label: "Individual", detail: "Always route to one host" },
    { id: "round-robin", label: "Round robin", detail: "Balance meetings across available hosts" },
    { id: "specialist", label: "Specialist", detail: "Route by meeting reason and expertise" }
  ];
  return (
    <FeaturePanel
      className={cn("amro-host-routing", className)}
      eyebrow="Host routing"
      title="Who should receive this meeting?"
      status={<Badge tone="neutral">{hosts.length} hosts</Badge>}
      {...props}
    >
      <div role="radiogroup" aria-label="Routing mode">
        {modes.map((item) => (
          <button
            aria-checked={mode === item.id}
            key={item.id}
            onClick={() => {
              setInternal(item.id);
              onChange?.(item.id);
            }}
            role="radio"
            type="button"
          >
            <span>
              {item.id === "individual" ? (
                <UserRound aria-hidden="true" />
              ) : item.id === "round-robin" ? (
                <Users aria-hidden="true" />
              ) : (
                <Headphones aria-hidden="true" />
              )}
            </span>
            <span>
              <strong>{item.label}</strong>
              <small>{item.detail}</small>
            </span>
          </button>
        ))}
      </div>
      <ul>
        {hosts.map((host) => (
          <li key={host.id}>
            <Avatar name={host.name} />
            <span>
              <strong>{host.name}</strong>
              <small>{host.role}</small>
            </span>
            <StatusIndicator
              label={host.availability ?? "available"}
              status={
                host.availability === "available"
                  ? "online"
                  : host.availability === "busy"
                    ? "warning"
                    : "offline"
              }
            />
          </li>
        ))}
      </ul>
      {onManageHosts && (
        <Button onClick={onManageHosts} variant="secondary">
          Manage routing hosts
        </Button>
      )}
    </FeaturePanel>
  );
}

export interface AgentHandoffContext {
  source: SourceProduct;
  conversationId?: string;
  summary: ReactNode;
  intent: ReactNode;
  facts?: readonly ReactNode[];
  transcriptMessages?: number;
}
export interface AgentToMeetingHandoffProps extends HTMLAttributes<HTMLDivElement> {
  context?: AgentHandoffContext;
  host?: ReactNode;
  event?: MeetingEventType;
  onBook?: (context: AgentHandoffContext) => void;
  onRemoveContext?: () => void;
}
const handoffContext: AgentHandoffContext = {
  source: "agents",
  conversationId: "conv_1842",
  summary:
    "Alex is evaluating governed AI support automation for a 35-person team and wants a practical pilot path.",
  intent: "Assess pilot fit and CRM workflow",
  facts: ["Uses HubSpot", "Human approval is required", "Target launch in Q4"],
  transcriptMessages: 18
};
export function AgentToMeetingHandoff({
  className,
  context = handoffContext,
  event = eventTypes[0]!,
  host = "Maya Chen",
  onBook,
  onRemoveContext,
  ...props
}: AgentToMeetingHandoffProps) {
  return (
    <FeaturePanel
      className={cn("amro-agent-handoff", className)}
      eyebrow="Conversation to meeting"
      title="Carry the useful context forward"
      description="The guest will not need to repeat the conversation."
      status={
        <SourceContextChip
          contextCount={(context.facts?.length ?? 0) + 1}
          source={context.source}
        />
      }
      {...props}
    >
      <section>
        <Bot aria-hidden="true" />
        <span>
          <strong>Conversation summary</strong>
          <p>{context.summary}</p>
          <small>
            {context.transcriptMessages ?? 0} transcript messages · {context.conversationId}
          </small>
        </span>
      </section>
      <div>
        <strong>Meeting intent</strong>
        <p>{context.intent}</p>
        {context.facts?.map((fact, index) => (
          <Badge key={index} tone="neutral">
            {fact}
          </Badge>
        ))}
      </div>
      <footer>
        <span>
          <Avatar name={getAccessibleText(host, "Suggested host")} />
          <span>
            <small>Suggested host and event</small>
            <strong>
              {host} · {event.label}
            </strong>
          </span>
        </span>
        <div>
          {onRemoveContext && (
            <Button onClick={onRemoveContext} variant="tertiary">
              Book without context
            </Button>
          )}
          {onBook && (
            <Button onClick={() => onBook(context)}>
              Continue to times
              <CalendarDays aria-hidden="true" />
            </Button>
          )}
        </div>
      </footer>
    </FeaturePanel>
  );
}
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-sales.md

Installable AmroUI product component source.

# AmroUI sales

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-sales.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-sales.json)

## Source

### source/components/sales.tsx

```tsx
import {
  Building2,
  Check,
  ChevronDown,
  CircleAlert,
  MapPin,
  Radar,
  Search,
  ShieldCheck,
  Sparkles,
  Target,
  UserRoundSearch,
  X
} from "lucide-react";
import {
  useId,
  useMemo,
  useState,
  type CSSProperties,
  type HTMLAttributes,
  type ReactNode
} from "react";
import { cn } from "../lib/cn.js";
import { Avatar } from "./avatar.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import { Card } from "./card.js";
import { EmptyNotice, FeaturePanel, MetricGrid, StatusIndicator } from "./feature-primitives.js";
import { Input, Textarea, TimeInput } from "./input.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export interface SalesBrief {
  product: string;
  audience: string;
  territory: string;
  personas: string;
  signals: string;
}

export interface SalesBriefComposerProps extends Omit<
  HTMLAttributes<HTMLFormElement>,
  "onSubmit" | "defaultValue"
> {
  defaultValue?: Partial<SalesBrief>;
  onSubmit?: (brief: SalesBrief) => void;
  submitLabel?: ReactNode;
}

export function SalesBriefComposer({
  className,
  defaultValue,
  onSubmit,
  submitLabel = "Build target audience",
  ...props
}: SalesBriefComposerProps) {
  const [brief, setBrief] = useState<SalesBrief>({
    product: defaultValue?.product ?? "AI customer operations platform",
    audience: defaultValue?.audience ?? "B2B SaaS companies with growing support teams",
    territory: defaultValue?.territory ?? "United Kingdom",
    personas: defaultValue?.personas ?? "VP Customer Success, Head of Support",
    signals: defaultValue?.signals ?? "Hiring support roles, recently funded"
  });
  const update = (field: keyof SalesBrief, value: string) =>
    setBrief((current) => ({ ...current, [field]: value }));
  const ready = [
    brief.product,
    brief.audience,
    brief.territory,
    brief.personas,
    brief.signals
  ].every((value) => value.trim().length > 1);
  return (
    <form
      className={cn("amro-sales-brief", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (ready) onSubmit?.(brief);
      }}
      {...props}
    >
      <FeaturePanel
        eyebrow="Campaign brief"
        title="Who should AmroGen find?"
        description="Define the offer and evidence the agent may use."
        status={
          <StatusIndicator
            label={ready ? "Ready" : "Incomplete"}
            status={ready ? "success" : "warning"}
          />
        }
      >
        <div className="amro-sales-brief__grid">
          <Input
            label="Product or offer"
            value={brief.product}
            onChange={(event) => update("product", event.target.value)}
          />
          <Input
            label="Target audience"
            value={brief.audience}
            onChange={(event) => update("audience", event.target.value)}
          />
          <Input
            label="Territory"
            value={brief.territory}
            onChange={(event) => update("territory", event.target.value)}
          />
          <Input
            label="Buyer personas"
            value={brief.personas}
            onChange={(event) => update("personas", event.target.value)}
          />
          <Input
            label="Buying signals"
            value={brief.signals}
            onChange={(event) => update("signals", event.target.value)}
          />
        </div>
        <div className="amro-sales-brief__footer">
          <span>
            <Radar aria-hidden="true" /> Research uses public and approved sources only
          </span>
          <Button disabled={!ready} type="submit">
            {submitLabel}
            <Sparkles aria-hidden="true" />
          </Button>
        </div>
      </FeaturePanel>
    </form>
  );
}

export interface ICPCriterion {
  id: string;
  label: string;
  group: "company" | "buyer" | "signal";
}
export interface ICPBuilderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  criteria?: readonly ICPCriterion[];
  onChange?: (criteria: readonly ICPCriterion[]) => void;
  onSave?: (criteria: readonly ICPCriterion[]) => void;
}

const defaultCriteria: readonly ICPCriterion[] = [
  { id: "size", label: "50–500 employees", group: "company" },
  { id: "industry", label: "B2B software", group: "company" },
  { id: "persona", label: "Customer success leader", group: "buyer" },
  { id: "hiring", label: "Hiring support roles", group: "signal" }
];

export function ICPBuilder({
  className,
  criteria = defaultCriteria,
  onChange,
  onSave,
  ...props
}: ICPBuilderProps) {
  const [items, setItems] = useState([...criteria]);
  const [draft, setDraft] = useState("");
  const remove = (id: string) => {
    const next = items.filter((item) => item.id !== id);
    setItems(next);
    onChange?.(next);
  };
  const add = () => {
    const label = draft.trim();
    if (!label) return;
    const next = [...items, { id: `${Date.now()}`, label, group: "company" as const }];
    setItems(next);
    setDraft("");
    onChange?.(next);
  };
  return (
    <FeaturePanel
      className={cn("amro-icp-builder", className)}
      eyebrow="Ideal customer profile"
      title="Qualification criteria"
      description="Every criterion remains visible and editable."
      actions={
        <Button onClick={() => onSave?.(items)} size="sm">
          Save ICP
        </Button>
      }
      {...props}
    >
      {(["company", "buyer", "signal"] as const).map((group) => (
        <section key={group}>
          <h3>
            {group === "company" ? "Company" : group === "buyer" ? "Buyer" : "Buying signals"}
          </h3>
          <div>
            {items
              .filter((item) => item.group === group)
              .map((item) => (
                <span key={item.id}>
                  {item.label}
                  <button
                    aria-label={`Remove ${item.label}`}
                    onClick={() => remove(item.id)}
                    type="button"
                  >
                    <X aria-hidden="true" />
                  </button>
                </span>
              ))}
          </div>
        </section>
      ))}
      <div className="amro-icp-builder__add">
        <Input
          aria-label="Add criterion"
          placeholder="Add a company criterion"
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
        />
        <Button disabled={!draft.trim()} onClick={add} variant="secondary">
          Add criterion
        </Button>
      </div>
    </FeaturePanel>
  );
}

export interface DetectedCompany {
  name: string;
  domain: string;
  industry?: string;
  location?: string;
}
export interface NamedAccountInputProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
  detectedCompany?: DetectedCompany;
  loading?: boolean;
  error?: ReactNode;
  onDetect?: (query: string) => void;
  onConfirm?: (company: DetectedCompany) => void;
}

export function NamedAccountInput({
  className,
  detectedCompany,
  error,
  loading = false,
  onConfirm,
  onDetect,
  ...props
}: NamedAccountInputProps) {
  const [query, setQuery] = useState("");
  return (
    <form
      className={cn("amro-named-account", className)}
      onSubmit={(event) => {
        event.preventDefault();
        if (query.trim()) onDetect?.(query.trim());
      }}
      {...props}
    >
      <Input
        error={error}
        hint="Paste a company website or enter its name."
        label="Named account"
        onChange={(event) => setQuery(event.target.value)}
        placeholder="northstar.example"
        value={query}
      />
      <Button disabled={!query.trim() || loading} type="submit">
        {loading ? "Detecting…" : "Detect company"}
        <Search aria-hidden="true" />
      </Button>
      {detectedCompany && (
        <Card>
          <Building2 aria-hidden="true" />
          <span>
            <strong>{detectedCompany.name}</strong>
            <small>
              {detectedCompany.domain}
              {detectedCompany.industry ? ` · ${detectedCompany.industry}` : ""}
              {detectedCompany.location ? ` · ${detectedCompany.location}` : ""}
            </small>
          </span>
          <Badge tone="success">
            <Check aria-hidden="true" /> Match found
          </Badge>
          <Button onClick={() => onConfirm?.(detectedCompany)} size="sm">
            Use company
          </Button>
        </Card>
      )}
    </form>
  );
}

export type AudienceSignalType = "hiring" | "funding" | "technology" | "intent" | "competitor";
export interface AudienceSignalChipProps extends HTMLAttributes<HTMLSpanElement> {
  type?: AudienceSignalType;
  strength?: "weak" | "medium" | "strong";
  selected?: boolean;
  onSelectedChange?: (selected: boolean) => void;
}
export function AudienceSignalChip({
  children,
  className,
  onSelectedChange,
  selected = false,
  strength = "strong",
  type = "intent",
  ...props
}: AudienceSignalChipProps) {
  return (
    <span
      className={cn("amro-audience-signal", `amro-audience-signal--${strength}`, className)}
      data-selected={selected}
      {...props}
    >
      <button aria-pressed={selected} onClick={() => onSelectedChange?.(!selected)} type="button">
        <Radar aria-hidden="true" />
        <span>{children ?? `${type[0]?.toUpperCase()}${type.slice(1)} signal`}</span>
        <small>{strength}</small>
      </button>
    </span>
  );
}

export interface ProspectCompany {
  id: string;
  name: string;
  domain?: string;
  industry?: string;
  location?: string;
  fitScore: number;
  reasons?: readonly string[];
  logoUrl?: string;
}
export interface ProspectCompanyCardProps extends HTMLAttributes<HTMLDivElement> {
  company?: ProspectCompany;
  selected?: boolean;
  onSelectedChange?: (selected: boolean) => void;
  onOpen?: (company: ProspectCompany) => void;
}
const sampleCompany: ProspectCompany = {
  id: "northstar",
  name: "Northstar Labs",
  domain: "northstar.example",
  industry: "B2B software",
  location: "London, UK",
  fitScore: 92,
  reasons: ["Hiring support leaders", "Uses compatible CRM", "Series B funding"]
};
export function ProspectCompanyCard({
  className,
  company = sampleCompany,
  onOpen,
  onSelectedChange,
  selected = false,
  ...props
}: ProspectCompanyCardProps) {
  return (
    <Card
      className={cn(
        "amro-prospect-company",
        selected && "amro-prospect-company--selected",
        className
      )}
      {...props}
    >
      <header>
        <Avatar name={company.name} {...(company.logoUrl ? { src: company.logoUrl } : {})} />
        <span>
          <strong>{company.name}</strong>
          <small>{company.domain}</small>
        </span>
        <label>
          <input
            checked={selected}
            onChange={(event) => onSelectedChange?.(event.target.checked)}
            type="checkbox"
          />
          <span className="amro-sr-only">Select {company.name}</span>
        </label>
      </header>
      <div className="amro-prospect-company__meta">
        <span>
          <Building2 aria-hidden="true" /> {company.industry}
        </span>
        <span>
          <MapPin aria-hidden="true" /> {company.location}
        </span>
      </div>
      <div className="amro-prospect-company__fit">
        <span>
          <strong>{company.fitScore}</strong>
          <small>/100 fit</small>
        </span>
        <meter max="100" min="0" value={company.fitScore}>
          {company.fitScore}%
        </meter>
      </div>
      <ul>
        {company.reasons?.map((reason) => (
          <li key={reason}>
            <Check aria-hidden="true" /> {reason}
          </li>
        ))}
      </ul>
      {onOpen && (
        <Button onClick={() => onOpen(company)} variant="tertiary">
          Review evidence
        </Button>
      )}
    </Card>
  );
}

export interface DecisionMaker {
  id: string;
  name: string;
  title: string;
  company: string;
  avatarUrl?: string;
  contactStatus?: "verified" | "unverified" | "unavailable";
  relevance?: string;
}
export interface DecisionMakerCardProps extends HTMLAttributes<HTMLDivElement> {
  person?: DecisionMaker;
  onOpen?: (person: DecisionMaker) => void;
  onAdd?: (person: DecisionMaker) => void;
}
const samplePerson: DecisionMaker = {
  id: "maya",
  name: "Maya Chen",
  title: "VP Customer Success",
  company: "Northstar Labs",
  contactStatus: "verified",
  relevance: "Owns support efficiency and is hiring three customer-success roles."
};
export function DecisionMakerCard({
  className,
  onAdd,
  onOpen,
  person = samplePerson,
  ...props
}: DecisionMakerCardProps) {
  return (
    <Card className={cn("amro-decision-maker", className)} {...props}>
      <header>
        <Avatar name={person.name} {...(person.avatarUrl ? { src: person.avatarUrl } : {})} />
        <span>
          <strong>{person.name}</strong>
          <small>
            {person.title} · {person.company}
          </small>
        </span>
        <StatusIndicator
          label={
            person.contactStatus === "verified"
              ? "Contact verified"
              : (person.contactStatus ?? "unverified")
          }
          status={person.contactStatus === "verified" ? "success" : "warning"}
        />
      </header>
      <p>{person.relevance}</p>
      <footer>
        {onOpen && (
          <Button onClick={() => onOpen(person)} variant="tertiary">
            View profile
          </Button>
        )}
        {onAdd && (
          <Button onClick={() => onAdd(person)} size="sm">
            <UserRoundSearch aria-hidden="true" /> Add prospect
          </Button>
        )}
      </footer>
    </Card>
  );
}

export interface ProspectStackProps extends HTMLAttributes<HTMLDivElement> {
  prospects?: readonly ProspectCompany[];
  initialIndex?: number;
  onReview?: (company: ProspectCompany) => void;
  onDismiss?: (company: ProspectCompany) => void;
}
export function ProspectStack({
  className,
  initialIndex = 0,
  onDismiss,
  onReview,
  prospects = [
    sampleCompany,
    { ...sampleCompany, id: "atlas", name: "Atlas CX", fitScore: 86 },
    { ...sampleCompany, id: "orbit", name: "Orbit Desk", fitScore: 78 }
  ],
  ...props
}: ProspectStackProps) {
  const [index, setIndex] = useState(initialIndex);
  const current = prospects[index];
  if (!current)
    return (
      <EmptyNotice
        className={className}
        title="Prospect review complete"
        description="Every matched account has been triaged."
      />
    );
  const next = () => setIndex((value) => value + 1);
  return (
    <div className={cn("amro-prospect-stack", className)} {...props}>
      <div className="amro-prospect-stack__depth" aria-hidden="true" />
      <ProspectCompanyCard company={current} />
      <footer>
        <span>
          {index + 1} of {prospects.length}
        </span>
        <Button
          onClick={() => {
            onDismiss?.(current);
            next();
          }}
          variant="secondary"
        >
          Skip
        </Button>
        <Button
          onClick={() => {
            onReview?.(current);
            next();
          }}
        >
          Review prospect
        </Button>
      </footer>
    </div>
  );
}

export interface FitEvidence {
  id: string;
  label: ReactNode;
  score: number;
  detail?: ReactNode;
}
export interface LeadFitMeterProps extends HTMLAttributes<HTMLDivElement> {
  score?: number;
  evidence?: readonly FitEvidence[];
  label?: ReactNode;
}
const fitEvidence: readonly FitEvidence[] = [
  { id: "company", label: "Company profile", score: 96, detail: "Industry and size match" },
  { id: "buyer", label: "Buyer relevance", score: 91, detail: "Owns the problem" },
  { id: "signal", label: "Buying signals", score: 84, detail: "2 current signals" }
];
export function LeadFitMeter({
  className,
  evidence = fitEvidence,
  label = "Lead fit",
  score = 92,
  ...props
}: LeadFitMeterProps) {
  const [expanded, setExpanded] = useState(false);
  return (
    <div className={cn("amro-lead-fit", className)} {...props}>
      <button aria-expanded={expanded} onClick={() => setExpanded((value) => !value)} type="button">
        <span
          className="amro-lead-fit__ring"
          style={
            { "--amro-fit-score": `${Math.max(0, Math.min(score, 100)) * 3.6}deg` } as CSSProperties
          }
        >
          <strong>{score}</strong>
          <small>/100</small>
        </span>
        <span>
          <strong>{label}</strong>
          <small>
            {score >= 85 ? "Strong match" : score >= 65 ? "Potential match" : "Review required"}
          </small>
        </span>
        <ChevronDown aria-hidden="true" />
      </button>
      {expanded && (
        <ul>
          {evidence.map((item) => (
            <li key={item.id}>
              <span>
                <strong>{item.label}</strong>
                {item.detail && <small>{item.detail}</small>}
              </span>
              <meter max="100" value={item.score}>
                {item.score}%
              </meter>
              <strong>{item.score}</strong>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export interface FitReasonPopoverProps extends HTMLAttributes<HTMLDivElement> {
  reasons?: readonly FitEvidence[];
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerLabel?: ReactNode;
}
export function FitReasonPopover({
  className,
  onOpenChange,
  open: controlledOpen,
  reasons = fitEvidence,
  triggerLabel = "Why this prospect?",
  ...props
}: FitReasonPopoverProps) {
  const [internalOpen, setInternalOpen] = useState(false);
  const open = controlledOpen ?? internalOpen;
  const id = useId();
  const toggle = () => {
    setInternalOpen(!open);
    onOpenChange?.(!open);
  };
  return (
    <div className={cn("amro-fit-popover", className)} {...props}>
      <Button aria-controls={id} aria-expanded={open} onClick={toggle} variant="tertiary">
        <Target aria-hidden="true" /> {triggerLabel}
      </Button>
      {open && (
        <div id={id} role="dialog" aria-label="Prospect fit evidence">
          <header>
            <strong>Selection evidence</strong>
            <button aria-label="Close evidence" onClick={toggle} type="button">
              <X aria-hidden="true" />
            </button>
          </header>
          <ul>
            {reasons.map((reason) => (
              <li key={reason.id}>
                <Check aria-hidden="true" />
                <span>
                  <strong>{reason.label}</strong>
                  <small>{reason.detail}</small>
                </span>
                <Badge tone="neutral">{reason.score}/100</Badge>
              </li>
            ))}
          </ul>
          <small>Score inputs are visible so your team can challenge the recommendation.</small>
        </div>
      )}
    </div>
  );
}

export interface CampaignOutcomeBoardProps extends HTMLAttributes<HTMLDivElement> {
  businesses?: number;
  people?: number;
  messages?: number;
  approved?: number;
  lastUpdated?: ReactNode;
}
export function CampaignOutcomeBoard({
  approved = 18,
  businesses = 42,
  className,
  lastUpdated = "Updated just now",
  messages = 31,
  people = 68,
  ...props
}: CampaignOutcomeBoardProps) {
  return (
    <FeaturePanel
      className={cn("amro-campaign-outcomes", className)}
      eyebrow="Campaign outcomes"
      title="Pipeline prepared"
      description={lastUpdated}
      status={<StatusIndicator label="Research complete" status="success" />}
      {...props}
    >
      <MetricGrid
        items={[
          {
            id: "businesses",
            label: "Businesses found",
            value: businesses,
            detail: "Matched to ICP"
          },
          { id: "people", label: "People identified", value: people, detail: "Decision makers" },
          {
            id: "messages",
            label: "Messages prepared",
            value: messages,
            detail: "Quality checked"
          },
          {
            id: "approved",
            label: "Approved to send",
            value: approved,
            detail: `${messages - approved} awaiting review`
          }
        ]}
      />
    </FeaturePanel>
  );
}

export type CampaignStatus = "draft" | "researching" | "review" | "approved" | "complete";
export interface CampaignStatusTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: CampaignStatus;
  counts?: Partial<Record<CampaignStatus, number>>;
  onChange?: (status: CampaignStatus) => void;
}
const campaignStatuses: readonly { id: CampaignStatus; label: string }[] = [
  { id: "draft", label: "Draft" },
  { id: "researching", label: "Researching" },
  { id: "review", label: "Ready for review" },
  { id: "approved", label: "Approved" },
  { id: "complete", label: "Complete" }
];
export function CampaignStatusTabs({
  className,
  counts = { review: 12, approved: 18 },
  onChange,
  value: controlled,
  ...props
}: CampaignStatusTabsProps) {
  const [internal, setInternal] = useState<CampaignStatus>("review");
  const value = controlled ?? internal;
  return (
    <div
      className={cn("amro-campaign-tabs", className)}
      role="tablist"
      aria-label="Campaign status"
      {...props}
    >
      {campaignStatuses.map((status) => (
        <button
          aria-selected={value === status.id}
          key={status.id}
          onClick={() => {
            setInternal(status.id);
            onChange?.(status.id);
          }}
          role="tab"
          type="button"
        >
          <span>{status.label}</span>
          {counts[status.id] !== undefined && <Badge tone="neutral">{counts[status.id]}</Badge>}
        </button>
      ))}
    </div>
  );
}

export type SalesChannel = "email" | "linkedin" | "sms" | "whatsapp";
export interface ChannelState {
  id: SalesChannel;
  label: ReactNode;
  status: "ready" | "needs-setup" | "unavailable";
  detail?: ReactNode;
}
export interface ChannelReadinessStripProps extends HTMLAttributes<HTMLDivElement> {
  channels?: readonly ChannelState[];
  onConfigure?: (channel: SalesChannel) => void;
}
const defaultChannels: readonly ChannelState[] = [
  { id: "email", label: "Email", status: "ready", detail: "SPF and DKIM verified" },
  { id: "linkedin", label: "LinkedIn", status: "needs-setup", detail: "Connect an account" },
  { id: "sms", label: "SMS", status: "unavailable", detail: "Not enabled" },
  { id: "whatsapp", label: "WhatsApp", status: "ready", detail: "Business profile connected" }
];
export function ChannelReadinessStrip({
  channels = defaultChannels,
  className,
  onConfigure,
  ...props
}: ChannelReadinessStripProps) {
  return (
    <div className={cn("amro-channel-strip", className)} {...props}>
      {channels.map((channel) => (
        <button key={channel.id} onClick={() => onConfigure?.(channel.id)} type="button">
          <StatusIndicator
            label={channel.label}
            status={
              channel.status === "ready"
                ? "success"
                : channel.status === "needs-setup"
                  ? "warning"
                  : "offline"
            }
          />
          <small>{channel.detail}</small>
        </button>
      ))}
    </div>
  );
}

export interface PersonalisedMessagePreviewProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onChange"
> {
  recipient?: DecisionMaker;
  subject?: string;
  message?: string;
  editable?: boolean;
  onChange?: (message: string) => void;
  onApprove?: () => void;
}
export function PersonalisedMessagePreview({
  className,
  editable = false,
  message = "Maya, I noticed Northstar is hiring across customer success. Teams at that stage often need a faster way to resolve repetitive support work without losing the human relationship.",
  onApprove,
  onChange,
  recipient = samplePerson,
  subject = "Scaling support without adding queues",
  ...props
}: PersonalisedMessagePreviewProps) {
  return (
    <FeaturePanel
      className={cn("amro-message-preview", className)}
      eyebrow="Personalised outreach"
      title={subject}
      description={
        <span>
          To {recipient.name} · {recipient.title}
        </span>
      }
      status={<Badge tone="success">Quality checked</Badge>}
      {...props}
    >
      <aside>
        <Avatar
          name={recipient.name}
          {...(recipient.avatarUrl ? { src: recipient.avatarUrl } : {})}
        />
        <span>
          <strong>{recipient.name}</strong>
          <small>{recipient.company}</small>
        </span>
        <p>{recipient.relevance}</p>
      </aside>
      <div>
        {editable ? (
          <Textarea
            aria-label="Outreach message"
            onChange={(event) => onChange?.(event.target.value)}
            value={message}
          />
        ) : (
          <p>{message}</p>
        )}
        <small>
          <Sparkles aria-hidden="true" /> Grounded in 3 verified account facts
        </small>
      </div>
      {onApprove && <Button onClick={onApprove}>Approve message</Button>}
    </FeaturePanel>
  );
}

export interface SequenceStep {
  id: string;
  day: number;
  channel: SalesChannel;
  title: ReactNode;
  status?: "pending" | "ready" | "sent" | "blocked";
}
export interface SequenceTimelineProps extends HTMLAttributes<HTMLOListElement> {
  steps?: readonly SequenceStep[];
  onOpenStep?: (step: SequenceStep) => void;
}
const defaultSequence: readonly SequenceStep[] = [
  { id: "email-1", day: 1, channel: "email", title: "Personalised introduction", status: "ready" },
  { id: "linkedin", day: 3, channel: "linkedin", title: "LinkedIn follow-up", status: "blocked" },
  { id: "email-2", day: 6, channel: "email", title: "Share relevant proof", status: "pending" },
  { id: "email-3", day: 10, channel: "email", title: "Close the loop", status: "pending" }
];
export function SequenceTimeline({
  className,
  onOpenStep,
  steps = defaultSequence,
  ...props
}: SequenceTimelineProps) {
  return (
    <ol className={cn("amro-sequence", className)} {...props}>
      {steps.map((step) => (
        <li data-status={step.status ?? "pending"} key={step.id}>
          <span>Day {step.day}</span>
          <span>
            <Badge tone="neutral">{step.channel}</Badge>
            <strong>{step.title}</strong>
          </span>
          <StatusIndicator
            label={step.status ?? "pending"}
            status={
              step.status === "sent" || step.status === "ready"
                ? "success"
                : step.status === "blocked"
                  ? "blocked"
                  : "pending"
            }
          />
          {onOpenStep && (
            <button
              aria-label={`Open ${getAccessibleText(step.title, "sequence step")}`}
              onClick={() => onOpenStep(step)}
              type="button"
            >
              Open
            </button>
          )}
        </li>
      ))}
    </ol>
  );
}

export type MessageVariant = "concise" | "consultative" | "direct";
export interface MessageVariantSwitcherProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "onChange"
> {
  value?: MessageVariant;
  onChange?: (variant: MessageVariant) => void;
  previews?: Partial<Record<MessageVariant, ReactNode>>;
}
export function MessageVariantSwitcher({
  className,
  onChange,
  previews = {
    concise: "Short and focused",
    consultative: "Insight-led and exploratory",
    direct: "Clear ask and next step"
  },
  value: controlled,
  ...props
}: MessageVariantSwitcherProps) {
  const [internal, setInternal] = useState<MessageVariant>("consultative");
  const value = controlled ?? internal;
  return (
    <div className={cn("amro-message-variants", className)} {...props}>
      <div role="radiogroup" aria-label="Message tone">
        {(["concise", "consultative", "direct"] as const).map((variant) => (
          <button
            aria-checked={value === variant}
            key={variant}
            onClick={() => {
              setInternal(variant);
              onChange?.(variant);
            }}
            role="radio"
            type="button"
          >
            {variant}
          </button>
        ))}
      </div>
      <p>{previews[value]}</p>
    </div>
  );
}

export interface EvidenceSentence {
  id: string;
  sentence: ReactNode;
  facts: readonly string[];
}
export interface PersonalisationEvidenceProps extends HTMLAttributes<HTMLDivElement> {
  evidence?: readonly EvidenceSentence[];
}
export function PersonalisationEvidence({
  className,
  evidence = [
    {
      id: "one",
      sentence: "I noticed Northstar is hiring across customer success.",
      facts: ["3 open CS roles", "Careers page, today"]
    },
    {
      id: "two",
      sentence: "Teams at that stage often need to reduce repetitive work.",
      facts: ["Series B", "Support team grew 42%"]
    }
  ],
  ...props
}: PersonalisationEvidenceProps) {
  const [active, setActive] = useState(evidence[0]?.id);
  return (
    <FeaturePanel
      className={cn("amro-personalisation-evidence", className)}
      eyebrow="Personalisation evidence"
      title="Every sentence has a reason"
      {...props}
    >
      <div>
        {evidence.map((item) => (
          <button
            aria-pressed={active === item.id}
            key={item.id}
            onClick={() => setActive(item.id)}
            type="button"
          >
            {item.sentence}
          </button>
        ))}
      </div>
      <aside>
        {evidence
          .find((item) => item.id === active)
          ?.facts.map((fact) => (
            <span key={fact}>
              <Check aria-hidden="true" /> {fact}
            </span>
          ))}
      </aside>
    </FeaturePanel>
  );
}

export interface QualityDimension {
  id: string;
  label: ReactNode;
  score: number;
}
export interface OutreachQualityScoreProps extends HTMLAttributes<HTMLDivElement> {
  score?: number;
  dimensions?: readonly QualityDimension[];
}
const defaultQuality: readonly QualityDimension[] = [
  { id: "relevance", label: "Relevance", score: 94 },
  { id: "specificity", label: "Specificity", score: 88 },
  { id: "tone", label: "Tone", score: 91 },
  { id: "clarity", label: "Clarity", score: 96 },
  { id: "risk", label: "Low risk", score: 90 }
];
export function OutreachQualityScore({
  className,
  dimensions = defaultQuality,
  score = 92,
  ...props
}: OutreachQualityScoreProps) {
  return (
    <Card className={cn("amro-outreach-quality", className)} {...props}>
      <header>
        <span>
          <small>Outreach quality</small>
          <strong>
            {score}
            <i>/100</i>
          </strong>
        </span>
        <StatusIndicator
          label={score >= 85 ? "Ready for review" : "Needs revision"}
          status={score >= 85 ? "success" : "warning"}
        />
      </header>
      <ul>
        {dimensions.map((item) => (
          <li key={item.id}>
            <span>{item.label}</span>
            <meter max="100" value={item.score}>
              {item.score}%
            </meter>
            <strong>{item.score}</strong>
          </li>
        ))}
      </ul>
    </Card>
  );
}

export interface WeakDraftWarningProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  reasons?: readonly ReactNode[];
  onFix?: () => void;
  onDismiss?: () => void;
}
export function WeakDraftWarning({
  className,
  onDismiss,
  onFix,
  reasons = [
    "Opening line could apply to any company",
    "Call to action asks for too much commitment"
  ],
  title = "Quality review rejected this draft",
  ...props
}: WeakDraftWarningProps) {
  return (
    <div className={cn("amro-weak-draft", className)} role="alert" {...props}>
      <CircleAlert aria-hidden="true" />
      <span>
        <strong>{title}</strong>
        <ul>
          {reasons.map((reason, index) => (
            <li key={index}>{reason}</li>
          ))}
        </ul>
      </span>
      <div>
        {onDismiss && (
          <Button onClick={onDismiss} variant="tertiary">
            Dismiss
          </Button>
        )}
        {onFix && <Button onClick={onFix}>Fix weak sections</Button>}
      </div>
    </div>
  );
}

export interface RetryWithGuidanceProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
  section?: ReactNode;
  defaultGuidance?: string;
  onSubmit?: (guidance: string) => void;
}
export function RetryWithGuidance({
  className,
  defaultGuidance = "Use the hiring signal in the opening and make the call to action lower commitment.",
  onSubmit,
  section = "Opening and call to action",
  ...props
}: RetryWithGuidanceProps) {
  const [guidance, setGuidance] = useState(defaultGuidance);
  return (
    <form
      className={cn("amro-retry-guidance", className)}
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit?.(guidance);
      }}
      {...props}
    >
      <label>
        <span>Regenerate {section}</span>
        <Textarea onChange={(event) => setGuidance(event.target.value)} value={guidance} />
      </label>
      <div>
        <small>Only this portion changes. Approved copy is preserved.</small>
        <Button disabled={!guidance.trim()} type="submit">
          <Sparkles aria-hidden="true" /> Regenerate section
        </Button>
      </div>
    </form>
  );
}

export interface ApprovalGateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  consequence?: ReactNode;
  dirty?: boolean;
  onEdit?: () => void;
  onApprove?: () => void;
  onReject?: () => void;
}
export function ApprovalGate({
  className,
  consequence = "Approving schedules 18 emails inside the configured send window.",
  dirty = false,
  onApprove,
  onEdit,
  onReject,
  title = "Review before anything is sent",
  ...props
}: ApprovalGateProps) {
  return (
    <FeaturePanel
      className={cn("amro-approval-gate", className)}
      eyebrow="Human control boundary"
      title={title}
      description={consequence}
      status={
        <StatusIndicator
          label={dirty ? "Edited" : "Awaiting review"}
          status={dirty ? "warning" : "pending"}
        />
      }
      {...props}
    >
      <div>
        <ShieldCheck aria-hidden="true" />
        <span>AmroGen is paused. No external action has occurred.</span>
      </div>
      <footer>
        {onReject && (
          <Button onClick={onReject} variant="tertiary">
            Reject
          </Button>
        )}
        {onEdit && (
          <Button onClick={onEdit} variant="secondary">
            Edit draft
          </Button>
        )}
        {onApprove && <Button onClick={onApprove}>Approve and schedule</Button>}
      </footer>
    </FeaturePanel>
  );
}

export interface ReviewQueueItem {
  id: string;
  recipient: string;
  company: string;
  score: number;
  status?: "pending" | "approved" | "rejected";
}
export interface BulkReviewQueueProps extends HTMLAttributes<HTMLDivElement> {
  items?: readonly ReviewQueueItem[];
  onDecision?: (item: ReviewQueueItem, decision: "approve" | "reject" | "skip") => void;
}
const reviewItems: readonly ReviewQueueItem[] = [
  { id: "maya", recipient: "Maya Chen", company: "Northstar Labs", score: 92 },
  { id: "sam", recipient: "Sam Wilson", company: "Atlas CX", score: 87 },
  { id: "lee", recipient: "Lee Morgan", company: "Orbit Desk", score: 83 }
];
export function BulkReviewQueue({
  className,
  items = reviewItems,
  onDecision,
  ...props
}: BulkReviewQueueProps) {
  const [index, setIndex] = useState(0);
  const item = items[index];
  if (!item)
    return (
      <EmptyNotice
        className={className}
        title="Review queue complete"
        description="All messages have a decision."
      />
    );
  const decide = (decision: "approve" | "reject" | "skip") => {
    onDecision?.(item, decision);
    setIndex((value) => value + 1);
  };
  return (
    <FeaturePanel
      className={cn("amro-bulk-review", className)}
      eyebrow={`Review ${index + 1} of ${items.length}`}
      title={item.recipient}
      description={item.company}
      status={<Badge tone="neutral">{item.score}/100 quality</Badge>}
      {...props}
    >
      <p>Personalised message ready for human review.</p>
      <div>
        <Button onClick={() => decide("reject")} variant="tertiary">
          R · Reject
        </Button>
        <Button onClick={() => decide("skip")} variant="secondary">
          S · Skip
        </Button>
        <Button onClick={() => decide("approve")}>A · Approve</Button>
      </div>
    </FeaturePanel>
  );
}

export interface ApprovalDiffProps extends HTMLAttributes<HTMLDivElement> {
  original?: string;
  revised?: string;
  editor?: ReactNode;
}
export function ApprovalDiff({
  className,
  editor = "Maya",
  original = "Would you have 30 minutes to discuss our platform?",
  revised = "Worth a 15-minute look next Tuesday?",
  ...props
}: ApprovalDiffProps) {
  return (
    <FeaturePanel
      className={cn("amro-approval-diff", className)}
      eyebrow="Human edit"
      title="What changed"
      description={`Edited by ${getAccessibleText(editor, "human reviewer")}`}
      {...props}
    >
      <div>
        <section>
          <Badge tone="neutral">AI draft</Badge>
          <del>{original}</del>
        </section>
        <section>
          <Badge tone="success">Approved edit</Badge>
          <ins>{revised}</ins>
        </section>
      </div>
    </FeaturePanel>
  );
}

export interface SendWindow {
  timezone: string;
  weekdays: readonly string[];
  start: string;
  end: string;
  dailyCap: number;
  excludeHolidays: boolean;
}
export interface SendWindowPlannerProps extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
  value?: SendWindow;
  onChange?: (window: SendWindow) => void;
}
export function SendWindowPlanner({
  className,
  onChange,
  value = {
    timezone: "Europe/London",
    weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri"],
    start: "09:00",
    end: "16:30",
    dailyCap: 40,
    excludeHolidays: true
  },
  ...props
}: SendWindowPlannerProps) {
  const [window, setWindow] = useState(value);
  const update = <K extends keyof SendWindow>(key: K, next: SendWindow[K]) => {
    const updated = { ...window, [key]: next };
    setWindow(updated);
    onChange?.(updated);
  };
  return (
    <form className={cn("amro-send-window", className)} {...props}>
      <header>
        <span>
          <strong>Send window</strong>
          <small>Recipient-local delivery controls</small>
        </span>
        <Badge tone="success">Safe sending on</Badge>
      </header>
      <Input
        label="Timezone"
        value={window.timezone}
        onChange={(event) => update("timezone", event.target.value)}
      />
      <div className="amro-send-window__days">
        {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => (
          <button
            aria-pressed={window.weekdays.includes(day)}
            key={day}
            onClick={() =>
              update(
                "weekdays",
                window.weekdays.includes(day)
                  ? window.weekdays.filter((item) => item !== day)
                  : [...window.weekdays, day]
              )
            }
            type="button"
          >
            {day}
          </button>
        ))}
      </div>
      <div>
        <label className="amro-field">
          <span className="amro-field__label">Start</span>
          <TimeInput
            value={window.start}
            onChange={(event) => update("start", event.target.value)}
          />
        </label>
        <label className="amro-field">
          <span className="amro-field__label">End</span>
          <TimeInput value={window.end} onChange={(event) => update("end", event.target.value)} />
        </label>
        <Input
          label="Daily cap"
          min="1"
          type="number"
          value={window.dailyCap}
          onChange={(event) => update("dailyCap", Number(event.target.value))}
        />
      </div>
      <label>
        <input
          checked={window.excludeHolidays}
          onChange={(event) => update("excludeHolidays", event.target.checked)}
          type="checkbox"
        />{" "}
        Exclude public holidays
      </label>
    </form>
  );
}

export interface CampaignProgressCardProps extends HTMLAttributes<HTMLDivElement> {
  stage?: ReactNode;
  progress?: number;
  blockers?: readonly ReactNode[];
  nextAction?: ReactNode;
  onContinue?: () => void;
}
export function CampaignProgressCard({
  blockers = ["Connect LinkedIn to enable step 2"],
  className,
  nextAction = "Review 12 prepared messages",
  onContinue,
  progress = 72,
  stage = "Ready for review",
  ...props
}: CampaignProgressCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-campaign-progress", className)}
      eyebrow="Campaign progress"
      title={stage}
      status={<strong>{progress}%</strong>}
      {...props}
    >
      <progress max="100" value={progress}>
        {progress}%
      </progress>
      {blockers.length > 0 && (
        <ul>
          {blockers.map((blocker, index) => (
            <li key={index}>
              <CircleAlert aria-hidden="true" /> {blocker}
            </li>
          ))}
        </ul>
      )}
      <footer>
        <span>
          <small>Next action</small>
          <strong>{nextAction}</strong>
        </span>
        {onContinue && <Button onClick={onContinue}>Open review queue</Button>}
      </footer>
    </FeaturePanel>
  );
}

export interface CampaignCommandBarProps extends HTMLAttributes<HTMLDivElement> {
  state?: "running" | "paused" | "complete";
  reviewCount?: number;
  onPause?: () => void;
  onResume?: () => void;
  onDuplicate?: () => void;
  onArchive?: () => void;
  onOpenReview?: () => void;
}
export function CampaignCommandBar({
  className,
  onArchive,
  onDuplicate,
  onOpenReview,
  onPause,
  onResume,
  reviewCount = 12,
  state = "running",
  ...props
}: CampaignCommandBarProps) {
  return (
    <div className={cn("amro-campaign-command", className)} {...props}>
      <StatusIndicator
        label={state}
        status={state === "running" ? "active" : state === "complete" ? "complete" : "idle"}
      />
      <div>
        {state === "running" && onPause && (
          <Button onClick={onPause} variant="secondary">
            Pause
          </Button>
        )}
        {state === "paused" && onResume && <Button onClick={onResume}>Resume</Button>}
        {onOpenReview && (
          <Button onClick={onOpenReview}>
            Review queue <Badge tone="neutral">{reviewCount}</Badge>
          </Button>
        )}
        {onDuplicate && (
          <Button onClick={onDuplicate} variant="tertiary">
            Duplicate
          </Button>
        )}
        {onArchive && (
          <Button onClick={onArchive} variant="tertiary">
            Archive
          </Button>
        )}
      </div>
    </div>
  );
}

export interface CreditUsageCardProps extends HTMLAttributes<HTMLDivElement> {
  predicted?: number;
  actual?: number;
  budget?: number;
  breakdown?: readonly { id: string; label: ReactNode; credits: number }[];
}
export function CreditUsageCard({
  actual = 640,
  breakdown = [
    { id: "research", label: "Research", credits: 280 },
    { id: "enrich", label: "Enrichment", credits: 210 },
    { id: "messages", label: "Messaging", credits: 150 }
  ],
  budget = 1200,
  className,
  predicted = 920,
  ...props
}: CreditUsageCardProps) {
  return (
    <FeaturePanel
      className={cn("amro-credit-usage", className)}
      eyebrow="Credit usage"
      title={`${actual.toLocaleString()} used`}
      description={`${predicted.toLocaleString()} predicted · ${budget.toLocaleString()} budget`}
      status={
        <Badge tone={predicted <= budget ? "success" : "info"}>
          {predicted <= budget ? "Within budget" : "Over budget"}
        </Badge>
      }
      {...props}
    >
      <progress max={budget} value={actual}>
        {actual} of {budget}
      </progress>
      <ul>
        {breakdown.map((item) => (
          <li key={item.id}>
            <span>{item.label}</span>
            <strong>{item.credits}</strong>
          </li>
        ))}
      </ul>
    </FeaturePanel>
  );
}

export interface SenderIdentityCardProps extends HTMLAttributes<HTMLDivElement> {
  name?: ReactNode;
  email?: ReactNode;
  provider?: ReactNode;
  health?: number;
  authentication?: readonly { label: ReactNode; valid: boolean }[];
  onManage?: () => void;
}
export function SenderIdentityCard({
  authentication = [
    { label: "SPF", valid: true },
    { label: "DKIM", valid: true },
    { label: "DMARC", valid: true }
  ],
  className,
  email = "maya@northstar.example",
  health = 96,
  name = "Maya Chen",
  onManage,
  provider = "Google Workspace",
  ...props
}: SenderIdentityCardProps) {
  return (
    <Card className={cn("amro-sender-identity", className)} {...props}>
      <header>
        <Avatar name={getAccessibleText(name, "Sender")} />
        <span>
          <strong>{name}</strong>
          <small>
            {email} · {provider}
          </small>
        </span>
        <StatusIndicator
          label={`${health}% mailbox health`}
          status={health >= 85 ? "success" : "warning"}
        />
      </header>
      <div>
        {authentication.map((item, index) => (
          <Badge
            key={getAccessibleText(item.label, `authentication-${index}`)}
            tone={item.valid ? "success" : "info"}
          >
            {item.valid ? <Check aria-hidden="true" /> : <CircleAlert aria-hidden="true" />}
            {item.label}
          </Badge>
        ))}
      </div>
      {onManage && (
        <Button onClick={onManage} variant="secondary">
          Manage sender
        </Button>
      )}
    </Card>
  );
}

export type AutonomyLevel = "research" | "drafts" | "approval" | "automation";
export interface AutonomyLevelControlProps extends Omit<
  HTMLAttributes<HTMLFieldSetElement>,
  "onChange"
> {
  value?: AutonomyLevel;
  onChange?: (level: AutonomyLevel) => void;
  automationApproved?: boolean;
}
const autonomyLevels: readonly { id: AutonomyLevel; label: string; detail: string }[] = [
  { id: "research", label: "Research only", detail: "Find accounts and people" },
  { id: "drafts", label: "Prepare drafts", detail: "Write messages but do not send" },
  { id: "approval", label: "Require approval", detail: "A human approves every send" },
  { id: "automation", label: "Approved automation", detail: "Send only inside pre-approved rules" }
];
export function AutonomyLevelControl({
  automationApproved = false,
  className,
  onChange,
  value: controlled,
  ...props
}: AutonomyLevelControlProps) {
  const [internal, setInternal] = useState<AutonomyLevel>("approval");
  const value = controlled ?? internal;
  return (
    <fieldset className={cn("amro-autonomy", className)} {...props}>
      <legend>Agent autonomy</legend>
      {autonomyLevels.map((level) => {
        const disabled = level.id === "automation" && !automationApproved;
        return (
          <label key={level.id} data-selected={value === level.id}>
            <input
              checked={value === level.id}
              disabled={disabled}
              name="autonomy"
              onChange={() => {
                setInternal(level.id);
                onChange?.(level.id);
              }}
              type="radio"
            />
            <span>
              <strong>{level.label}</strong>
              <small>
                {level.detail}
                {disabled ? " · Admin approval required" : ""}
              </small>
            </span>
          </label>
        );
      })}
    </fieldset>
  );
}

export interface SalesAuditEntry {
  id: string;
  time: ReactNode;
  actor: ReactNode;
  action: ReactNode;
  target: ReactNode;
  outcome: "success" | "pending" | "blocked" | "failed";
}
export interface SalesAgentAuditLogProps extends HTMLAttributes<HTMLDivElement> {
  entries?: readonly SalesAuditEntry[];
  onSearch?: (query: string) => void;
  onOpen?: (entry: SalesAuditEntry) => void;
}
const salesAudit: readonly SalesAuditEntry[] = [
  {
    id: "one",
    time: "10:42",
    actor: "Research agent",
    action: "Enriched",
    target: "Northstar Labs",
    outcome: "success"
  },
  {
    id: "two",
    time: "10:45",
    actor: "Maya Chen",
    action: "Edited message",
    target: "Opening sentence",
    outcome: "success"
  },
  {
    id: "three",
    time: "10:47",
    actor: "AmroGen",
    action: "Requested approval",
    target: "18 messages",
    outcome: "pending"
  }
];
export function SalesAgentAuditLog({
  className,
  entries = salesAudit,
  onOpen,
  onSearch,
  ...props
}: SalesAgentAuditLogProps) {
  const [query, setQuery] = useState("");
  const filtered = useMemo(
    () =>
      entries.filter((entry) =>
        `${getAccessibleText(entry.actor, "")} ${getAccessibleText(entry.action, "")} ${getAccessibleText(entry.target, "")}`
          .toLowerCase()
          .includes(query.toLowerCase())
      ),
    [entries, query]
  );
  return (
    <div className={cn("amro-sales-audit", className)} {...props}>
      <header>
        <span>
          <strong>Sales agent audit log</strong>
          <small>{entries.length} governed events</small>
        </span>
        <label>
          <Search aria-hidden="true" />
          <input
            aria-label="Search audit log"
            onChange={(event) => {
              setQuery(event.target.value);
              onSearch?.(event.target.value);
            }}
            placeholder="Search actions…"
            value={query}
          />
        </label>
      </header>
      <div role="table" aria-label="Sales agent audit events">
        {filtered.map((entry) => (
          <button key={entry.id} onClick={() => onOpen?.(entry)} role="row" type="button">
            <span role="cell">{entry.time}</span>
            <strong role="cell">{entry.actor}</strong>
            <span role="cell">{entry.action}</span>
            <span role="cell">{entry.target}</span>
            <StatusIndicator
              label={entry.outcome}
              status={entry.outcome === "failed" ? "error" : entry.outcome}
            />
          </button>
        ))}
      </div>
      {filtered.length === 0 && <EmptyNotice title="No matching audit events" />}
    </div>
  );
}
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-shared.md

Installable AmroUI product component source.

# AmroUI shared

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-shared.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-shared.json)

## Source

### source/components/shared.tsx

```tsx
import {
  ArrowRight,
  CalendarDays,
  Check,
  ChevronDown,
  ChevronRight,
  CircleAlert,
  Clock3,
  Coins,
  Command,
  Copy,
  ExternalLink,
  Maximize2,
  Menu,
  MessageCircle,
  PanelRightClose,
  RotateCcw,
  Search,
  ShieldCheck,
  Sparkles,
  UserRoundCheck,
  X
} from "lucide-react";
import {
  forwardRef,
  useId,
  useMemo,
  useState,
  type ButtonHTMLAttributes,
  type HTMLAttributes,
  type ReactNode
} from "react";
import { cn } from "../lib/cn.js";
import { AmroUILogo } from "./amro-ui-logo.js";
import { Badge } from "./badge.js";
import { Button, type ButtonProps } from "./button.js";
import { Card } from "./card.js";
import { EmptyNotice, FeaturePanel, StatusIndicator } from "./feature-primitives.js";
import { Skeleton } from "./skeleton.js";

function getAccessibleText(value: ReactNode, fallback: string): string {
  return typeof value === "string" || typeof value === "number" ? String(value) : fallback;
}

export interface AmroAppHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  product?: ReactNode;
  navigation?: readonly { id: string; label: ReactNode; href: string; active?: boolean }[];
  actions?: ReactNode;
  onMenuToggle?: () => void;
}

export const AmroAppHeader = forwardRef<HTMLElement, AmroAppHeaderProps>(
  (
    {
      actions,
      className,
      navigation = [
        { id: "workspace", label: "Workspace", href: "#workspace", active: true },
        { id: "activity", label: "Activity", href: "#activity" }
      ],
      onMenuToggle,
      product = "Agents",
      ...props
    },
    ref
  ) => (
    <header ref={ref} className={cn("amro-app-header", className)} {...props}>
      <button
        aria-label="Open navigation"
        className="amro-app-header__menu"
        onClick={onMenuToggle}
        type="button"
      >
        <Menu aria-hidden="true" />
      </button>
      <a className="amro-app-header__brand" href="/" aria-label="AmroUI home">
        <AmroUILogo mode="full" variant="dark" />
        <span>{product}</span>
      </a>
      <nav aria-label="Product navigation">
        {navigation.map((item) => (
          <a aria-current={item.active ? "page" : undefined} href={item.href} key={item.id}>
            {item.label}
          </a>
        ))}
      </nav>
      <div className="amro-app-header__actions">{actions}</div>
    </header>
  )
);
AmroAppHeader.displayName = "AmroAppHeader";

export interface AmroProductIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  name?: ReactNode;
  description?: ReactNode;
  status?: "online" | "working" | "offline";
  icon?: ReactNode;
}

export const AmroProductIdentity = forwardRef<HTMLDivElement, AmroProductIdentityProps>(
  (
    {
      className,
      description = "Outcome-driven AI workspace",
      icon = <Sparkles aria-hidden="true" />,
      name = "Amro Agents",
      status = "online",
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-product-identity", className)} {...props}>
      <span className="amro-product-identity__mark">{icon}</span>
      <span>
        <strong>{name}</strong>
        <small>{description}</small>
      </span>
      <StatusIndicator
        label={status === "working" ? "Working" : status === "online" ? "Online" : "Offline"}
        status={status === "working" ? "active" : status}
      />
    </div>
  )
);
AmroProductIdentity.displayName = "AmroProductIdentity";

export interface TalkNowButtonProps extends ButtonProps {
  availability?: "available" | "busy" | "offline";
}

export const TalkNowButton = forwardRef<HTMLButtonElement, TalkNowButtonProps>(
  ({ availability = "available", children, className, disabled, ...props }, ref) => (
    <Button
      ref={ref}
      className={cn("amro-talk-now", className)}
      disabled={disabled || availability !== "available"}
      {...props}
    >
      <span className="amro-talk-now__pulse" aria-hidden="true" />
      <MessageCircle aria-hidden="true" />
      {children ?? (availability === "available" ? "Talk now" : "Currently unavailable")}
    </Button>
  )
);
TalkNowButton.displayName = "TalkNowButton";

export const GradientPrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <Button ref={ref} variant="primary" {...props} />
));
GradientPrimaryButton.displayName = "GradientPrimaryButton";

export const OutlineSecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <Button ref={ref} variant="secondary" {...props} />
));
OutlineSecondaryButton.displayName = "OutlineSecondaryButton";

export const TextTertiaryAction = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <Button ref={ref} variant="tertiary" {...props} />
));
TextTertiaryAction.displayName = "TextTertiaryAction";

export interface LivePulseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  state?: "live" | "processing" | "paused";
  label?: ReactNode;
}

export const LivePulseBadge = forwardRef<HTMLSpanElement, LivePulseBadgeProps>(
  ({ className, label, state = "live", ...props }, ref) => (
    <span
      ref={ref}
      className={cn("amro-live-pulse", `amro-live-pulse--${state}`, className)}
      {...props}
    >
      <span aria-hidden="true" />
      {label ?? (state === "live" ? "Live" : state === "processing" ? "Processing" : "Paused")}
    </span>
  )
);
LivePulseBadge.displayName = "LivePulseBadge";

export interface MetricTileProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  label?: ReactNode;
  value?: ReactNode;
  change?: ReactNode;
  trend?: "up" | "down" | "neutral";
  icon?: ReactNode;
}

export const MetricTile = forwardRef<HTMLDivElement, MetricTileProps>(
  (
    {
      change = "+18% this week",
      className,
      icon = <Sparkles aria-hidden="true" />,
      label = "Verified outcomes",
      trend = "up",
      value = "128",
      ...props
    },
    ref
  ) => (
    <Card ref={ref} className={cn("amro-metric-tile", className)} {...props}>
      <span className="amro-metric-tile__icon">{icon}</span>
      <span>{label}</span>
      <strong>{value}</strong>
      <small data-trend={trend}>{change}</small>
    </Card>
  )
);
MetricTile.displayName = "MetricTile";

export interface ProcessDiagramNode {
  id: string;
  label: ReactNode;
  detail?: ReactNode;
  status?: "pending" | "active" | "complete" | "blocked";
}

export interface ExpandableProcessDiagramProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "title"
> {
  title?: ReactNode;
  nodes?: readonly ProcessDiagramNode[];
  defaultExpanded?: boolean;
}

const defaultProcessNodes: readonly ProcessDiagramNode[] = [
  { id: "understand", label: "Understand", detail: "Ground the request", status: "complete" },
  { id: "work", label: "Execute", detail: "Coordinate specialists", status: "active" },
  { id: "approve", label: "Approve", detail: "Human control boundary", status: "pending" }
];

export const ExpandableProcessDiagram = forwardRef<HTMLDivElement, ExpandableProcessDiagramProps>(
  (
    {
      className,
      defaultExpanded = false,
      nodes = defaultProcessNodes,
      title = "How this works",
      ...props
    },
    ref
  ) => {
    const [expanded, setExpanded] = useState(defaultExpanded);
    return (
      <div ref={ref} className={cn("amro-process-diagram", className)} {...props}>
        <button
          aria-expanded={expanded}
          onClick={() => setExpanded((value) => !value)}
          type="button"
        >
          <span>
            <Sparkles aria-hidden="true" /> {title}
          </span>
          <ChevronDown aria-hidden="true" />
        </button>
        {expanded && (
          <ol>
            {nodes.map((node, index) => (
              <li key={node.id} data-status={node.status ?? "pending"}>
                <span>{node.status === "complete" ? <Check aria-hidden="true" /> : index + 1}</span>
                <span>
                  <strong>{node.label}</strong>
                  {node.detail && <small>{node.detail}</small>}
                </span>
                {index < nodes.length - 1 && <ArrowRight aria-hidden="true" />}
              </li>
            ))}
          </ol>
        )}
      </div>
    );
  }
);
ExpandableProcessDiagram.displayName = "ExpandableProcessDiagram";

export interface ProductPreviewFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  urlLabel?: ReactNode;
  toolbar?: ReactNode;
  onFullscreen?: () => void;
}

export const ProductPreviewFrame = forwardRef<HTMLDivElement, ProductPreviewFrameProps>(
  (
    {
      children,
      className,
      onFullscreen,
      title = "Product preview",
      toolbar,
      urlLabel = "app.amro.ai",
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-product-preview", className)} {...props}>
      <header>
        <span aria-hidden="true">
          <i />
          <i />
          <i />
        </span>
        <strong>{title}</strong>
        <span className="amro-product-preview__url">{urlLabel}</span>
        {toolbar}
        {onFullscreen && (
          <button aria-label="Open fullscreen preview" onClick={onFullscreen} type="button">
            <Maximize2 aria-hidden="true" />
          </button>
        )}
      </header>
      <div className="amro-product-preview__canvas">
        {children ?? (
          <section className="amro-product-preview__starter">
            <span className="amro-eyebrow">Governed AI workflow</span>
            <strong>Ready for human review</strong>
            <p>The agent completed its work, verified the result, and paused before action.</p>
            <div>
              <span>Verified sources</span>
              <b>12</b>
            </div>
          </section>
        )}
      </div>
    </div>
  )
);
ProductPreviewFrame.displayName = "ProductPreviewFrame";

export interface GalleryAsset {
  id: string;
  src: string;
  alt: string;
  caption?: ReactNode;
}

export interface FullscreenGalleryViewerProps extends HTMLAttributes<HTMLDivElement> {
  assets?: readonly GalleryAsset[];
  initialIndex?: number;
  onClose?: () => void;
  onIndexChange?: (index: number) => void;
}

export const FullscreenGalleryViewer = forwardRef<HTMLDivElement, FullscreenGalleryViewerProps>(
  ({ assets = [], className, initialIndex = 0, onClose, onIndexChange, ...props }, ref) => {
    const [index, setIndex] = useState(Math.min(initialIndex, Math.max(assets.length - 1, 0)));
    const select = (next: number) => {
      if (!assets.length) return;
      const bounded = (next + assets.length) % assets.length;
      setIndex(bounded);
      onIndexChange?.(bounded);
    };
    const asset = assets[index];
    return (
      <div
        ref={ref}
        className={cn("amro-gallery-viewer", className)}
        role="dialog"
        aria-modal="true"
        aria-label="Asset gallery"
        {...props}
      >
        <header>
          <span>{assets.length ? `${index + 1} of ${assets.length}` : "Gallery"}</span>
          {onClose && (
            <button aria-label="Close gallery" onClick={onClose} type="button">
              <X aria-hidden="true" />
            </button>
          )}
        </header>
        {asset ? (
          <figure>
            <img alt={asset.alt} src={asset.src} />
            <figcaption>{asset.caption ?? asset.alt}</figcaption>
          </figure>
        ) : (
          <EmptyNotice
            title="No assets to preview"
            description="Generated assets will appear here."
          />
        )}
        {assets.length > 1 && (
          <footer>
            <Button
              aria-label="Previous asset"
              onClick={() => select(index - 1)}
              variant="secondary"
            >
              Previous
            </Button>
            <div>
              {assets.map((item, assetIndex) => (
                <button
                  aria-label={`View ${item.alt}`}
                  aria-current={assetIndex === index}
                  key={item.id}
                  onClick={() => select(assetIndex)}
                  type="button"
                />
              ))}
            </div>
            <Button aria-label="Next asset" onClick={() => select(index + 1)} variant="secondary">
              Next
            </Button>
          </footer>
        )}
      </div>
    );
  }
);
FullscreenGalleryViewer.displayName = "FullscreenGalleryViewer";

export interface FeatureProofCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  proof?: ReactNode;
  source?: ReactNode;
  action?: ReactNode;
}

export const FeatureProofCard = forwardRef<HTMLDivElement, FeatureProofCardProps>(
  (
    {
      action,
      className,
      description = "Grounded in approved workspace knowledge.",
      proof = "96% confidence",
      source = "12 verified sources",
      title = "Evidence-backed result",
      ...props
    },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-feature-proof", className)}
      eyebrow="Why trust this"
      title={title}
      description={description}
      status={
        <Badge tone="success">
          <ShieldCheck aria-hidden="true" /> Verified
        </Badge>
      }
      footer={action}
      {...props}
    >
      <div>
        <strong>{proof}</strong>
        <span>{source}</span>
      </div>
    </FeaturePanel>
  )
);
FeatureProofCard.displayName = "FeatureProofCard";

export interface CreditBalanceBadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  balance?: number;
  unit?: ReactNode;
  lowAt?: number;
}

export const CreditBalanceBadge = forwardRef<HTMLButtonElement, CreditBalanceBadgeProps>(
  ({ balance = 240, className, lowAt = 50, unit = "credits", ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        "amro-credit-balance",
        balance <= lowAt && "amro-credit-balance--low",
        className
      )}
      type="button"
      {...props}
    >
      <Coins aria-hidden="true" />
      <strong>{balance.toLocaleString()}</strong>
      <span>{unit}</span>
      <ChevronRight aria-hidden="true" />
    </button>
  )
);
CreditBalanceBadge.displayName = "CreditBalanceBadge";

export interface HumanApprovalNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  reviewer?: ReactNode;
  onReview?: () => void;
}

export const HumanApprovalNotice = forwardRef<HTMLDivElement, HumanApprovalNoticeProps>(
  (
    {
      className,
      description = "Nothing external happens until a person reviews this action.",
      onReview,
      reviewer = "Workspace approver",
      title = "Human approval required",
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-approval-notice", className)} role="status" {...props}>
      <UserRoundCheck aria-hidden="true" />
      <span>
        <strong>{title}</strong>
        <small>{description}</small>
      </span>
      <Badge tone="info">{reviewer}</Badge>
      {onReview && (
        <Button onClick={onReview} size="sm">
          Review
        </Button>
      )}
    </div>
  )
);
HumanApprovalNotice.displayName = "HumanApprovalNotice";

export interface EmbeddedBookingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  host?: ReactNode;
  title?: ReactNode;
  duration?: ReactNode;
  timezone?: ReactNode;
  slots?: readonly { id: string; label: ReactNode }[];
  onSelectSlot?: (id: string) => void;
}

export const EmbeddedBookingCard = forwardRef<HTMLDivElement, EmbeddedBookingCardProps>(
  (
    {
      className,
      duration = "30 min",
      host = "Amro team",
      onSelectSlot,
      slots = [
        { id: "one", label: "10:30" },
        { id: "two", label: "14:00" },
        { id: "three", label: "16:30" }
      ],
      timezone = "Local time",
      title = "Continue in a meeting",
      ...props
    },
    ref
  ) => {
    const [selected, setSelected] = useState<string>();
    return (
      <FeaturePanel
        ref={ref}
        className={cn("amro-embedded-booking", className)}
        eyebrow="AmroMeet"
        title={title}
        description={host}
        status={
          <Badge tone="neutral">
            <Clock3 aria-hidden="true" /> {duration}
          </Badge>
        }
        footer={
          <span>
            <CalendarDays aria-hidden="true" /> {timezone}
          </span>
        }
        {...props}
      >
        <div>
          {slots.map((slot) => (
            <button
              aria-pressed={selected === slot.id}
              key={slot.id}
              onClick={() => {
                setSelected(slot.id);
                onSelectSlot?.(slot.id);
              }}
              type="button"
            >
              {slot.label}
            </button>
          ))}
        </div>
        {selected && <Button onClick={() => onSelectSlot?.(selected)}>Continue</Button>}
      </FeaturePanel>
    );
  }
);
EmbeddedBookingCard.displayName = "EmbeddedBookingCard";

export interface AmroToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  tone?: "success" | "info" | "warning" | "error";
  action?: ReactNode;
  onDismiss?: () => void;
}

export const AmroToast = forwardRef<HTMLDivElement, AmroToastProps>(
  (
    {
      action,
      className,
      description,
      onDismiss,
      title = "Changes saved",
      tone = "success",
      ...props
    },
    ref
  ) => (
    <div
      ref={ref}
      className={cn("amro-toast", `amro-toast--${tone}`, className)}
      role={tone === "error" ? "alert" : "status"}
      {...props}
    >
      <span>
        {tone === "success" ? <Check aria-hidden="true" /> : <CircleAlert aria-hidden="true" />}
      </span>
      <span>
        <strong>{title}</strong>
        {description && <small>{description}</small>}
      </span>
      {action}
      {onDismiss && (
        <button aria-label="Dismiss notification" onClick={onDismiss} type="button">
          <X aria-hidden="true" />
        </button>
      )}
    </div>
  )
);
AmroToast.displayName = "AmroToast";

export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  icon?: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  primaryAction?: ReactNode;
  secondaryAction?: ReactNode;
}

export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
  (
    {
      className,
      description = "Start a workflow to see results here.",
      icon = <Sparkles aria-hidden="true" />,
      primaryAction,
      secondaryAction,
      title = "Ready when you are",
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-empty-state", className)} {...props}>
      <span>{icon}</span>
      <strong>{title}</strong>
      <p>{description}</p>
      {(primaryAction || secondaryAction) && (
        <div>
          {primaryAction}
          {secondaryAction}
        </div>
      )}
    </div>
  )
);
EmptyState.displayName = "EmptyState";

export interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
  rows?: number;
  showMedia?: boolean;
}

export const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(
  ({ className, rows = 3, showMedia = true, ...props }, ref) => (
    <Card
      ref={ref}
      className={cn("amro-skeleton-card", className)}
      aria-busy="true"
      aria-label="Loading content"
      {...props}
    >
      {showMedia && <Skeleton className="amro-skeleton-card__media" />}
      <Skeleton className="amro-skeleton-card__title" />
      {Array.from({ length: rows }, (_, index) => (
        <Skeleton className="amro-skeleton-card__row" key={index} />
      ))}
    </Card>
  )
);
SkeletonCard.displayName = "SkeletonCard";

export interface ErrorRecoveryCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  title?: ReactNode;
  description?: ReactNode;
  errorId?: ReactNode;
  retryLabel?: ReactNode;
  onRetry?: () => void;
  onViewDetails?: () => void;
}

export const ErrorRecoveryCard = forwardRef<HTMLDivElement, ErrorRecoveryCardProps>(
  (
    {
      className,
      description = "Your work is safe. Retry the last step or inspect the failure details.",
      errorId,
      onRetry,
      onViewDetails,
      retryLabel = "Try again",
      title = "This step could not finish",
      ...props
    },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-error-recovery", className)}
      eyebrow="Recovery"
      title={title}
      description={description}
      status={<StatusIndicator label="Needs attention" status="error" />}
      footer={errorId && <code>{errorId}</code>}
      {...props}
    >
      <div>
        {onRetry && (
          <Button onClick={onRetry}>
            <RotateCcw aria-hidden="true" /> {retryLabel}
          </Button>
        )}
        {onViewDetails && (
          <Button onClick={onViewDetails} variant="tertiary">
            View details
          </Button>
        )}
      </div>
    </FeaturePanel>
  )
);
ErrorRecoveryCard.displayName = "ErrorRecoveryCard";

export interface CommandPaletteItem {
  id: string;
  label: ReactNode;
  description?: ReactNode;
  keywords?: string;
  shortcut?: ReactNode;
  icon?: ReactNode;
  disabled?: boolean;
}

export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  items?: readonly CommandPaletteItem[];
  open?: boolean;
  defaultOpen?: boolean;
  placeholder?: string;
  onOpenChange?: (open: boolean) => void;
  onSelect?: (item: CommandPaletteItem) => void;
}

const defaultCommands: readonly CommandPaletteItem[] = [
  {
    id: "new",
    label: "Start a workflow",
    description: "Create from a goal",
    keywords: "new create",
    icon: <Sparkles aria-hidden="true" />,
    shortcut: "⌘N"
  },
  {
    id: "search",
    label: "Search activity",
    description: "Find outcomes and runs",
    keywords: "find",
    icon: <Search aria-hidden="true" />,
    shortcut: "⌘K"
  },
  { id: "copy", label: "Copy current link", icon: <Copy aria-hidden="true" /> }
];

export const CommandPalette = forwardRef<HTMLDivElement, CommandPaletteProps>(
  (
    {
      className,
      defaultOpen = true,
      items = defaultCommands,
      onOpenChange,
      onSelect,
      open: controlledOpen,
      placeholder = "Type a command…",
      ...props
    },
    ref
  ) => {
    const [internalOpen, setInternalOpen] = useState(defaultOpen);
    const [query, setQuery] = useState("");
    const open = controlledOpen ?? internalOpen;
    const results = useMemo(
      () =>
        items.filter((item) =>
          `${getAccessibleText(item.label, "")} ${item.keywords ?? ""}`
            .toLowerCase()
            .includes(query.toLowerCase())
        ),
      [items, query]
    );
    const setOpen = (next: boolean) => {
      setInternalOpen(next);
      onOpenChange?.(next);
    };
    if (!open) return null;
    return (
      <div
        ref={ref}
        className={cn("amro-command-palette", className)}
        role="dialog"
        aria-modal="true"
        aria-label="Command palette"
        {...props}
      >
        <header>
          <Command aria-hidden="true" />
          <input
            aria-label="Search commands"
            autoFocus
            onChange={(event) => setQuery(event.target.value)}
            placeholder={placeholder}
            value={query}
          />
          <kbd>Esc</kbd>
          <button aria-label="Close command palette" onClick={() => setOpen(false)} type="button">
            <X aria-hidden="true" />
          </button>
        </header>
        <div role="listbox" aria-label="Commands">
          {results.length ? (
            results.map((item) => (
              <button
                disabled={item.disabled}
                key={item.id}
                onClick={() => onSelect?.(item)}
                role="option"
                type="button"
              >
                <span>{item.icon}</span>
                <span>
                  <strong>{item.label}</strong>
                  {item.description && <small>{item.description}</small>}
                </span>
                {item.shortcut && <kbd>{item.shortcut}</kbd>}
              </button>
            ))
          ) : (
            <EmptyNotice title="No matching commands" description="Try a different search." />
          )}
        </div>
      </div>
    );
  }
);
CommandPalette.displayName = "CommandPalette";

export interface ContextDrawerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  open?: boolean;
  title?: ReactNode;
  description?: ReactNode;
  footer?: ReactNode;
  onOpenChange?: (open: boolean) => void;
}

export const ContextDrawer = forwardRef<HTMLElement, ContextDrawerProps>(
  (
    {
      children,
      className,
      description,
      footer,
      onOpenChange,
      open = true,
      title = "Context",
      ...props
    },
    ref
  ) => {
    const titleId = useId();
    if (!open) return null;
    return (
      <aside
        ref={ref}
        className={cn("amro-context-drawer", className)}
        aria-labelledby={titleId}
        {...props}
      >
        <header>
          <span>
            <strong id={titleId}>{title}</strong>
            {description && <small>{description}</small>}
          </span>
          <button
            aria-label="Close context drawer"
            onClick={() => onOpenChange?.(false)}
            type="button"
          >
            <PanelRightClose aria-hidden="true" />
          </button>
        </header>
        <div className="amro-context-drawer__body">{children}</div>
        {footer && <footer>{footer}</footer>}
      </aside>
    );
  }
);
ContextDrawer.displayName = "ContextDrawer";

export interface ActivityTimelineItem {
  id: string;
  title: ReactNode;
  detail?: ReactNode;
  timestamp?: ReactNode;
  status?: "complete" | "active" | "pending" | "error";
  icon?: ReactNode;
}

export interface ActivityTimelineProps extends HTMLAttributes<HTMLOListElement> {
  items?: readonly ActivityTimelineItem[];
}

const defaultTimeline: readonly ActivityTimelineItem[] = [
  {
    id: "one",
    title: "Research completed",
    detail: "12 sources verified",
    timestamp: "2 min ago",
    status: "complete"
  },
  {
    id: "two",
    title: "Drafting recommendation",
    detail: "Sales specialist is working",
    timestamp: "Now",
    status: "active"
  },
  { id: "three", title: "Human review", detail: "Waiting at control boundary", status: "pending" }
];

export const ActivityTimeline = forwardRef<HTMLOListElement, ActivityTimelineProps>(
  ({ className, items = defaultTimeline, ...props }, ref) => (
    <ol ref={ref} className={cn("amro-activity-timeline", className)} {...props}>
      {items.length ? (
        items.map((item) => (
          <li data-status={item.status ?? "pending"} key={item.id}>
            <span>
              {item.icon ??
                (item.status === "complete" ? (
                  <Check aria-hidden="true" />
                ) : (
                  <Clock3 aria-hidden="true" />
                ))}
            </span>
            <span>
              <strong>{item.title}</strong>
              {item.detail && <small>{item.detail}</small>}
            </span>
            {item.timestamp && <time>{item.timestamp}</time>}
          </li>
        ))
      ) : (
        <li>
          <EmptyNotice title="No activity yet" />
        </li>
      )}
    </ol>
  )
);
ActivityTimeline.displayName = "ActivityTimeline";

export interface AuditLogEntry {
  id: string;
  timestamp: ReactNode;
  actor: ReactNode;
  action: ReactNode;
  target?: ReactNode;
  outcome?: "success" | "pending" | "blocked" | "failed";
}

export interface AuditLogTableProps extends HTMLAttributes<HTMLDivElement> {
  entries?: readonly AuditLogEntry[];
  caption?: ReactNode;
  onOpenEntry?: (entry: AuditLogEntry) => void;
}

const defaultAuditEntries: readonly AuditLogEntry[] = [
  {
    id: "one",
    timestamp: "10:42",
    actor: "Sales agent",
    action: "Enriched account",
    target: "Northstar",
    outcome: "success"
  },
  {
    id: "two",
    timestamp: "10:45",
    actor: "Amro",
    action: "Requested approval",
    target: "Outbound sequence",
    outcome: "pending"
  }
];

export const AuditLogTable = forwardRef<HTMLDivElement, AuditLogTableProps>(
  (
    {
      caption = "Agent audit log",
      className,
      entries = defaultAuditEntries,
      onOpenEntry,
      ...props
    },
    ref
  ) => (
    <div ref={ref} className={cn("amro-audit-log", className)} {...props}>
      <table>
        <caption>{caption}</caption>
        <thead>
          <tr>
            <th scope="col">Time</th>
            <th scope="col">Actor</th>
            <th scope="col">Action</th>
            <th scope="col">Target</th>
            <th scope="col">Outcome</th>
            {onOpenEntry && (
              <th scope="col">
                <span className="amro-sr-only">Open</span>
              </th>
            )}
          </tr>
        </thead>
        <tbody>
          {entries.map((entry) => (
            <tr key={entry.id}>
              <td>{entry.timestamp}</td>
              <td>{entry.actor}</td>
              <td>{entry.action}</td>
              <td>{entry.target ?? "—"}</td>
              <td>
                <StatusIndicator
                  label={entry.outcome ?? "success"}
                  status={entry.outcome === "failed" ? "error" : (entry.outcome ?? "success")}
                />
              </td>
              {onOpenEntry && (
                <td>
                  <button
                    aria-label={`Open audit entry ${entry.id}`}
                    onClick={() => onOpenEntry(entry)}
                    type="button"
                  >
                    <ExternalLink aria-hidden="true" />
                  </button>
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
      {entries.length === 0 && (
        <EmptyNotice title="No audit events" description="Agent actions will be recorded here." />
      )}
    </div>
  )
);
AuditLogTable.displayName = "AuditLogTable";
```

## Usage

Shared product source installed automatically by AmroUI component entries.

---

URL: https://amro-ui.vercel.app/utilities/amro-ui-signature-flows.md

Installable AmroUI product component source.

# AmroUI signature Flows

Installable AmroUI product component source.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/amro-ui-signature-flows.json
```

[Registry JSON](https://amro-ui.vercel.app/r/amro-ui-signature-flows.json)

## Source

### source/components/signature-flows.tsx

```tsx
import { Check, ChevronLeft, ChevronRight, Mic, Pause, Play, ShieldCheck } from "lucide-react";
import {
  forwardRef,
  useMemo,
  useState,
  type HTMLAttributes,
  type KeyboardEvent,
  type ReactNode
} from "react";
import { cn } from "../lib/cn.js";
import { Badge } from "./badge.js";
import { Button } from "./button.js";
import { AssistantPresenceOrb, OmniPromptComposer } from "./conversational.js";
import { FeaturePanel, StatusIndicator, type AmroProcessStatus } from "./feature-primitives.js";
import { RangeInput } from "./input.js";

export interface WorkflowStep {
  id: string;
  label: ReactNode;
  description?: ReactNode;
  status: AmroProcessStatus;
}

export interface WorkflowStepRailProps extends HTMLAttributes<HTMLOListElement> {
  steps?: readonly WorkflowStep[];
  orientation?: "horizontal" | "vertical";
}

const defaultSteps: readonly WorkflowStep[] = [
  { id: "brief", label: "Brief", status: "complete" },
  { id: "research", label: "Research", status: "active" },
  { id: "review", label: "Human review", status: "pending" }
];

export const WorkflowStepRail = forwardRef<HTMLOListElement, WorkflowStepRailProps>(
  ({ className, orientation = "horizontal", steps = defaultSteps, ...props }, ref) => (
    <ol
      ref={ref}
      aria-label="Workflow progress"
      className={cn("amro-step-rail", `amro-step-rail--${orientation}`, className)}
      {...props}
    >
      {steps.map((step, index) => (
        <li aria-current={step.status === "active" ? "step" : undefined} key={step.id}>
          <span className="amro-step-rail__marker" data-status={step.status}>
            {step.status === "complete" ? <Check aria-hidden="true" /> : index + 1}
          </span>
          <span className="amro-step-rail__copy">
            <strong>{step.label}</strong>
            {step.description !== undefined && <small>{step.description}</small>}
          </span>
        </li>
      ))}
    </ol>
  )
);
WorkflowStepRail.displayName = "WorkflowStepRail";

export type ResearchProgressRailProps = WorkflowStepRailProps;
export const ResearchProgressRail = WorkflowStepRail;

export type EditorialPipelineProps = WorkflowStepRailProps;
export const EditorialPipeline = WorkflowStepRail;

export type CourseGenerationPipelineProps = WorkflowStepRailProps;
export const CourseGenerationPipeline = WorkflowStepRail;

export type GenerationProgressStoryProps = WorkflowStepRailProps;
export const GenerationProgressStory = WorkflowStepRail;

export type MeetCreationProgressProps = WorkflowStepRailProps;
export const MeetCreationProgress = WorkflowStepRail;

export interface BookingCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
  monthLabel?: string;
  days?: readonly number[];
  availableDays?: readonly number[];
  value?: number;
  onChange?: (day: number) => void;
  onPreviousMonth?: () => void;
  onNextMonth?: () => void;
}

export const BookingCalendar = forwardRef<HTMLDivElement, BookingCalendarProps>(
  (
    {
      availableDays = [4, 5, 8, 11, 12, 15, 18, 19, 22, 25, 26, 29],
      className,
      days = Array.from({ length: 30 }, (_, index) => index + 1),
      monthLabel = "August 2026",
      onChange,
      onNextMonth,
      onPreviousMonth,
      value,
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = useState(value ?? availableDays[0]);
    const selected = value ?? internalValue;
    const available = useMemo(() => new Set(availableDays), [availableDays]);
    const select = (day: number) => {
      if (!available.has(day)) return;
      setInternalValue(day);
      onChange?.(day);
    };
    const move = (event: KeyboardEvent<HTMLButtonElement>, day: number) => {
      const offset =
        event.key === "ArrowRight"
          ? 1
          : event.key === "ArrowLeft"
            ? -1
            : event.key === "ArrowDown"
              ? 7
              : event.key === "ArrowUp"
                ? -7
                : 0;
      if (offset === 0) return;
      event.preventDefault();
      const candidates = days.filter((candidate) => available.has(candidate));
      const current = candidates.indexOf(day);
      const next =
        candidates[Math.max(0, Math.min(candidates.length - 1, current + Math.sign(offset)))] ??
        day;
      select(next);
      const grid = event.currentTarget.parentElement;
      requestAnimationFrame(() =>
        grid?.querySelector<HTMLButtonElement>(`[data-amro-day="${next}"]`)?.focus()
      );
    };

return (
      <div ref={ref} className={cn("amro-booking-calendar", className)} {...props}>
        <header>
          <button aria-label="Previous month" onClick={onPreviousMonth} type="button">
            <ChevronLeft aria-hidden="true" />
          </button>
          <strong aria-live="polite">{monthLabel}</strong>
          <button aria-label="Next month" onClick={onNextMonth} type="button">
            <ChevronRight aria-hidden="true" />
          </button>
        </header>
        <div aria-label={monthLabel} className="amro-booking-calendar__grid" role="grid">
          {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((label) => (
            <span aria-hidden="true" key={label}>
              {label}
            </span>
          ))}
          {days.map((day) => (
            <button
              aria-label={`${monthLabel} ${day}${available.has(day) ? ", available" : ", unavailable"}`}
              aria-selected={selected === day}
              data-amro-day={day}
              disabled={!available.has(day)}
              key={day}
              onClick={() => select(day)}
              onKeyDown={(event) => move(event, day)}
              role="gridcell"
              tabIndex={selected === day ? 0 : -1}
              type="button"
            >
              {day}
            </button>
          ))}
        </div>
      </div>
    );
  }
);
BookingCalendar.displayName = "BookingCalendar";

export interface BeforeAfterCompareProps extends HTMLAttributes<HTMLDivElement> {
  before?: ReactNode;
  after?: ReactNode;
  value?: number;
  onValueChange?: (value: number) => void;
}

export const BeforeAfterCompare = forwardRef<HTMLDivElement, BeforeAfterCompareProps>(
  (
    {
      after = "Enhanced image",
      before = "Original image",
      className,
      onValueChange,
      value,
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = useState(50);
    const current = value ?? internalValue;
    const update = (next: number) => {
      setInternalValue(next);
      onValueChange?.(next);
    };
    return (
      <div ref={ref} className={cn("amro-compare", className)} {...props}>
        <div className="amro-compare__canvas">
          <div className="amro-compare__before">
            <Badge>Before</Badge>
            {before}
          </div>
          <div
            className="amro-compare__after"
            style={{ clipPath: `inset(0 ${100 - current}% 0 0)` }}
          >
            <Badge tone="info">After</Badge>
            {after}
          </div>
          <span className="amro-compare__divider" style={{ left: `${current}%` }} />
        </div>
        <label>
          <span>Comparison position</span>
          <RangeInput
            aria-label="Comparison position"
            max={100}
            min={0}
            onChange={(event) => update(event.currentTarget.valueAsNumber)}
            value={current}
          />
        </label>
      </div>
    );
  }
);
BeforeAfterCompare.displayName = "BeforeAfterCompare";

export interface WeeklyAvailabilityGridProps extends HTMLAttributes<HTMLDivElement> {
  days?: readonly string[];
  slots?: readonly string[];
  value?: readonly string[];
  onValueChange?: (slots: string[]) => void;
}

export const WeeklyAvailabilityGrid = forwardRef<HTMLDivElement, WeeklyAvailabilityGridProps>(
  (
    {
      className,
      days = ["Mon", "Tue", "Wed", "Thu", "Fri"],
      onValueChange,
      slots = ["09:00", "13:00", "17:00"],
      value,
      ...props
    },
    ref
  ) => {
    const [internal, setInternal] = useState<string[]>(["Mon-09:00", "Tue-13:00", "Wed-09:00"]);
    const selected = value ?? internal;
    const toggle = (id: string) => {
      const next = selected.includes(id)
        ? selected.filter((item) => item !== id)
        : [...selected, id];
      setInternal(next);
      onValueChange?.(next);
    };
    return (
      <div ref={ref} className={cn("amro-availability", className)} {...props}>
        <span className="amro-visually-hidden">Select available weekly time slots</span>
        <div className="amro-availability__grid">
          {days.flatMap((day) =>
            slots.map((slot) => {
              const id = `${day}-${slot}`;
              return (
                <button
                  aria-pressed={selected.includes(id)}
                  key={id}
                  onClick={() => toggle(id)}
                  type="button"
                >
                  <strong>{day}</strong>
                  <span>{slot}</span>
                </button>
              );
            })
          )}
        </div>
      </div>
    );
  }
);
WeeklyAvailabilityGrid.displayName = "WeeklyAvailabilityGrid";

export interface PublicationGateProps extends HTMLAttributes<HTMLDivElement> {
  checks?: readonly { id: string; label: ReactNode; passed: boolean }[];
  onPublish?: () => void;
  onResolve?: () => void;
}

export const PublicationGate = forwardRef<HTMLDivElement, PublicationGateProps>(
  (
    {
      checks = [
        { id: "facts", label: "Claims verified", passed: true },
        { id: "approval", label: "Editor approval", passed: false }
      ],
      className,
      onPublish,
      onResolve,
      ...props
    },
    ref
  ) => {
    const blocked = checks.some((check) => !check.passed);
    return (
      <FeaturePanel
        ref={ref}
        className={cn("amro-publication-gate", className)}
        eyebrow="Editorial control"
        title="Publication gate"
        status={
          <StatusIndicator
            label={blocked ? "Blocked" : "Ready"}
            status={blocked ? "blocked" : "complete"}
          />
        }
        {...props}
      >
        <ul>
          {checks.map((check) => (
            <li key={check.id}>
              <StatusIndicator label={check.label} status={check.passed ? "complete" : "blocked"} />
            </li>
          ))}
        </ul>
        <div className="amro-action-row">
          {blocked && (
            <Button onClick={onResolve} variant="secondary">
              Resolve blockers
            </Button>
          )}
          <Button
            disabled={blocked}
            onClick={() => {
              if (!blocked) onPublish?.();
            }}
          >
            Publish
          </Button>
        </div>
      </FeaturePanel>
    );
  }
);
PublicationGate.displayName = "PublicationGate";

export interface AssistantCommandCenterProps extends Omit<
  HTMLAttributes<HTMLDivElement>,
  "status" | "onSubmit"
> {
  assistantName?: string;
  status?: "idle" | "listening" | "thinking" | "speaking" | "error";
  onSubmit?: (message: string) => void;
}

export const AssistantCommandCenter = forwardRef<HTMLDivElement, AssistantCommandCenterProps>(
  (
    {
      assistantName = "Amro Assistant",
      className,
      onSubmit = () => {},
      status = "thinking",
      ...props
    },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-signature-flow", className)}
      eyebrow="AmroAgents"
      title="Assistant command center"
      status={<AssistantPresenceOrb size="sm" status={status} />}
      {...props}
    >
      <div className="amro-signature-flow__hero">
        <AssistantPresenceOrb status={status} />
        <div>
          <strong>{assistantName}</strong>
          <span>Coordinates knowledge, tools, approvals, and handoffs.</span>
        </div>
      </div>
      <WorkflowStepRail
        steps={[
          { id: "understand", label: "Understand", status: "complete" },
          { id: "act", label: "Act", status: "active" },
          { id: "approve", label: "Approve", status: "pending" }
        ]}
      />
      <OmniPromptComposer onSubmit={onSubmit} />
    </FeaturePanel>
  )
);
AssistantCommandCenter.displayName = "AssistantCommandCenter";

export interface HumanApprovalPipelineProps extends HTMLAttributes<HTMLDivElement> {
  onApprove?: () => void;
  onReject?: () => void;
}
export const HumanApprovalPipeline = forwardRef<HTMLDivElement, HumanApprovalPipelineProps>(
  ({ className, onApprove, onReject, ...props }, ref) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-signature-flow", className)}
      eyebrow="Control boundary"
      title="Human approval pipeline"
      status={<StatusIndicator status="blocked" label="Awaiting approval" />}
      {...props}
    >
      <WorkflowStepRail
        steps={[
          { id: "draft", label: "Agent draft", status: "complete" },
          { id: "review", label: "Human review", status: "active" },
          { id: "send", label: "External action", status: "blocked" }
        ]}
      />
      <div className="amro-approval-summary">
        <ShieldCheck aria-hidden="true" />
        <span>
          <strong>No action has been sent</strong>
          <small>Review the proposed change before it reaches a customer.</small>
        </span>
      </div>
      <div className="amro-action-row">
        <Button variant="secondary" onClick={onReject}>
          Request changes
        </Button>
        <Button onClick={onApprove}>Approve and continue</Button>
      </div>
    </FeaturePanel>
  )
);
HumanApprovalPipeline.displayName = "HumanApprovalPipeline";

export type EditorialQualityGateProps = PublicationGateProps;
export const EditorialQualityGate = PublicationGate;

export interface ConversationalLessonPlayerProps extends HTMLAttributes<HTMLDivElement> {
  lessonTitle?: string;
  playing?: boolean;
  onPlayingChange?: (playing: boolean) => void;
}
export const ConversationalLessonPlayer = forwardRef<
  HTMLDivElement,
  ConversationalLessonPlayerProps
>(
  (
    {
      className,
      lessonTitle = "Designing reliable AI workflows",
      onPlayingChange,
      playing,
      ...props
    },
    ref
  ) => {
    const [internal, setInternal] = useState(false);
    const active = playing ?? internal;
    const toggle = () => {
      setInternal(!active);
      onPlayingChange?.(!active);
    };
    return (
      <FeaturePanel
        ref={ref}
        className={cn("amro-signature-flow", className)}
        eyebrow="AmroAcademy"
        title={lessonTitle}
        status={
          <StatusIndicator
            label={active ? "Playing" : "Paused"}
            status={active ? "active" : "idle"}
          />
        }
        {...props}
      >
        <div className="amro-lesson-player">
          <AssistantPresenceOrb status={active ? "speaking" : "idle"} size="lg">
            <Mic aria-hidden="true" />
          </AssistantPresenceOrb>
          <Button aria-label={active ? "Pause lesson" : "Play lesson"} onClick={toggle}>
            {active ? <Pause aria-hidden="true" /> : <Play aria-hidden="true" />}{" "}
            {active ? "Pause" : "Play lesson"}
          </Button>
        </div>
        <blockquote>
          <mark>Human approval boundaries</mark> keep consequential actions observable and
          reversible.
        </blockquote>
        <OmniPromptComposer onSubmit={() => {}} placeholder="Ask your tutor about this lesson…" />
      </FeaturePanel>
    );
  }
);
ConversationalLessonPlayer.displayName = "ConversationalLessonPlayer";

export interface DurableGenerationCardProps extends HTMLAttributes<HTMLDivElement> {
  assetName?: string;
  version?: number;
  onDownload?: () => void;
  onRegenerate?: () => void;
}
export const DurableGenerationCard = forwardRef<HTMLDivElement, DurableGenerationCardProps>(
  (
    { assetName = "Campaign hero", className, onDownload, onRegenerate, version = 3, ...props },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-signature-flow", className)}
      eyebrow="AmroVisionAI"
      title={assetName}
      status={<StatusIndicator status="complete" label={`Saved · v${version}`} />}
      {...props}
    >
      <div
        className="amro-generated-asset"
        role="img"
        aria-label={`${assetName} generated preview`}
      >
        <span>Generated asset</span>
      </div>
      <div className="amro-action-row">
        <Button variant="secondary" onClick={onRegenerate}>
          Create variation
        </Button>
        <Button onClick={onDownload}>Download</Button>
      </div>
    </FeaturePanel>
  )
);
DurableGenerationCard.displayName = "DurableGenerationCard";

export interface ConversationToMeetingBridgeProps extends HTMLAttributes<HTMLDivElement> {
  summary?: ReactNode;
  onBook?: () => void;
}
export const ConversationToMeetingBridge = forwardRef<
  HTMLDivElement,
  ConversationToMeetingBridgeProps
>(
  (
    {
      className,
      onBook,
      summary = "Carry the goal, participants, and conversation context into a meeting.",
      ...props
    },
    ref
  ) => (
    <FeaturePanel
      ref={ref}
      className={cn("amro-signature-flow", className)}
      eyebrow="AmroAgents → AmroMeet"
      title="Continue in a meeting"
      status={<StatusIndicator status="online" label="Times available" />}
      {...props}
    >
      <p>{summary}</p>
      <BookingCalendar />
      <Button onClick={onBook}>Book selected time</Button>
    </FeaturePanel>
  )
);
ConversationToMeetingBridge.displayName = "ConversationToMeetingBridge";
```

## Usage

Shared product source installed automatically by AmroUI component entries.