@flamingo-stack/openframe-frontend-core 0.0.685-snapshot.20260929164409 → 0.0.685

package/src/components/chat/onboarding-carousel.tsx

@@ -1,162 +0,0 @@
-'use client';
-
-import { type CSSProperties, type KeyboardEvent, type ReactNode, useState } from 'react';
-import { cn } from '../../utils/cn';
-import { Button } from '../ui/button';
-
-export interface OnboardingCarouselStep {
-  id: string;
-  /** Glyph in the 64px tile above the title. Pass it sized to 28px. */
-  icon: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-}
-
-export interface OnboardingCarouselProps {
-  steps: OnboardingCarouselStep[];
-  /** The last step's primary action. */
-  onComplete: () => void;
-  /** Label of the last step's primary action. */
-  completeLabel?: string;
-  previousLabel?: string;
-  nextLabel?: string;
-  /** Accessible name of the carousel region. */
-  label?: string;
-  className?: string;
-}
-
-/**
- * Step-by-step introduction: one card at a time in the middle, its neighbours
- * peeking in from the sides under an edge fade, dots below, Previous / Next
- * underneath. The last step swaps Next for `completeLabel`. There is no skip:
- * the design walks every step. Fills the height its parent gives it: the cards
- * stretch, the dots and buttons keep their size.
- */
-export function OnboardingCarousel({
-  steps,
-  onComplete,
-  completeLabel = 'Start Chat',
-  previousLabel = 'Previous Step',
-  nextLabel = 'Next Step',
-  label = 'Introduction',
-  className,
-}: OnboardingCarouselProps) {
-  const [index, setIndex] = useState(0);
-  const lastIndex = steps.length - 1;
-  const isFirst = index === 0;
-  const isLast = index === lastIndex;
-
-  const goTo = (next: number) => setIndex(Math.min(Math.max(next, 0), lastIndex));
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
-    if (event.key === 'ArrowRight') goTo(index + 1);
-    else if (event.key === 'ArrowLeft') goTo(index - 1);
-    else return;
-    event.preventDefault();
-  };
-
-  // Card width and the gap between cards drive both the card size and the
-  // track offset, so they live in one place. Percentages resolve against the
-  // viewport width in both uses (the track is as wide as the viewport).
-  const trackStyle = {
-    '--onboarding-card-w': 'min(600px, calc(100% - 2 * var(--spacing-system-xl)))',
-    '--onboarding-gap': 'var(--spacing-system-lf)',
-    transform: `translateX(calc(${-index} * (var(--onboarding-card-w) + var(--onboarding-gap))))`,
-  } as CSSProperties;
-
-  // The design's large steps (card padding, dots to buttons) are 80px at the
-  // app's 1024px default width, where `--spacing-system-xxl` is still 48px:
-  // spelled as twice the fixed 40px step.
-  return (
-    <section
-      aria-roledescription="carousel"
-      aria-label={label}
-      onKeyDown={handleKeyDown}
-      className={cn(
-        'flex min-h-0 w-full flex-1 flex-col items-center gap-[calc(2*var(--spacing-system-xlf))]',
-        className,
-      )}
-    >
-      <div className="flex min-h-0 w-full flex-1 flex-col items-center gap-[var(--spacing-system-xs)]">
-        <div className="relative flex min-h-0 w-full flex-1 overflow-hidden">
-          <div
-            className="flex w-full gap-[var(--onboarding-gap)] transition-transform duration-300 ease-out motion-reduce:transition-none"
-            style={trackStyle}
-          >
-            {steps.map((step, i) => {
-              const isCurrent = i === index;
-              return (
-                <div
-                  key={step.id}
-                  role="group"
-                  aria-roledescription="slide"
-                  aria-label={`${i + 1} of ${steps.length}`}
-                  aria-hidden={!isCurrent}
-                  inert={!isCurrent || undefined}
-                  className={cn(
-                    'flex w-[var(--onboarding-card-w)] shrink-0 flex-col items-center justify-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-xl)] py-[calc(2*var(--spacing-system-xlf))] text-center',
-                    i === 0 && 'ml-[calc((100%-var(--onboarding-card-w))/2)]',
-                  )}
-                >
-                  <span className="flex size-16 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-accent">
-                    {step.icon}
-                  </span>
-                  <div className="flex flex-col gap-[var(--spacing-system-l)] text-ods-text-primary [word-break:break-word]">
-                    <h2 className="text-h2">{step.title}</h2>
-                    {step.description && <p className="whitespace-pre-line text-h6">{step.description}</p>}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-[120px] bg-gradient-to-r from-ods-bg to-transparent" />
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-[120px] bg-gradient-to-l from-ods-bg to-transparent" />
-        </div>
-
-        {/* The slides only toggle visibility, which is not announced. */}
-        <p className="sr-only" aria-live="polite">
-          Step {index + 1} of {steps.length}: {steps[index]?.title}
-        </p>
-
-        <div className="flex items-center" role="group" aria-label="Choose step">
-          {steps.map((step, i) => {
-            const isCurrent = i === index;
-            return (
-              <Button
-                key={step.id}
-                variant="transparent"
-                aria-current={isCurrent ? 'step' : undefined}
-                aria-label={`Go to step ${i + 1}`}
-                onClick={() => goTo(i)}
-                className="flex size-6 shrink-0 items-center justify-center rounded-full p-0 md:h-6"
-              >
-                <span
-                  className={cn(
-                    'size-1.5 rounded-full transition-colors duration-150',
-                    isCurrent ? 'bg-ods-accent' : 'bg-ods-text-secondary',
-                  )}
-                />
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      <div className="flex flex-wrap items-center justify-center gap-[var(--spacing-system-m)]">
-        {/* aria-disabled, not disabled: stepping back onto the first card must
-            not drop keyboard focus from the button the user just pressed. */}
-        <Button
-          variant="outline"
-          className="w-[200px]"
-          aria-disabled={isFirst || undefined}
-          onClick={() => goTo(index - 1)}
-        >
-          {previousLabel}
-        </Button>
-        <Button variant="accent" className="w-[200px]" onClick={isLast ? onComplete : () => goTo(index + 1)}>
-          {isLast ? completeLabel : nextLabel}
-        </Button>
-      </div>
-    </section>
-  );
-}

package/src/components/chat/system-event-message.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes } from 'react';
-import { InfoCircleIcon } from '../icons-v2-generated';
-import { SquareAvatar } from '../ui/square-avatar';
-import { AiAssistantInfo } from './ai-assistant-info';
-
-// The chat backend announces a technician taking the chat over (or handing it
-// back) as a plain system line: "{name} joined the chat" / "{name} left the
-// chat". The copy is fixed server-side, so these two shapes are the contract.
-const JOINED = /^(.+) joined the chat$/;
-const LEFT = /^(.+) left the chat$/;
-
-export interface SystemEventMessageProps extends HTMLAttributes<HTMLDivElement> {
-  /** The system line as the backend sent it. */
-  text: string;
-  timestamp?: Date;
-}
-
-/**
- * A system line in the fae chat v2 thread (`ai-assistant-info`,
- * type=direct-chat): a technician joining becomes "Technician Joined" with
- * their initials; any other line keeps its own wording under an info icon.
- */
-const SystemEventMessage = forwardRef<HTMLDivElement, SystemEventMessageProps>(({ text, timestamp, ...props }, ref) => {
-  const joined = JOINED.exec(text)?.[1];
-  if (joined) {
-    return (
-      <AiAssistantInfo
-        ref={ref}
-        leading={<SquareAvatar alt={joined} fallback={joined} size="lg" variant="round" className="shrink-0" />}
-        title="Technician Joined"
-        body={`You're now chatting with ${joined}.`}
-        timestamp={timestamp}
-        {...props}
-      />
-    );
-  }
-  const left = LEFT.exec(text)?.[1];
-  return (
-    <AiAssistantInfo
-      ref={ref}
-      icon={<InfoCircleIcon className="size-6 text-ods-accent" />}
-      title={left ? 'Technician Left' : text}
-      body={left ? `${left} left the conversation.` : undefined}
-      timestamp={timestamp}
-      {...props}
-    />
-  );
-});
-
-SystemEventMessage.displayName = 'SystemEventMessage';
-
-export { SystemEventMessage };

package/src/components/ui/__tests__/avatar-stack.test.tsx

@@ -1,25 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { AvatarStack } from '../avatar-stack';
-
-const people = [{ name: 'Ada Lin' }, { name: 'Roman Smith' }, { name: 'Michael Johnson' }];
-
-describe('AvatarStack', () => {
-  it('counts the overflow from the people it gets', () => {
-    render(<AvatarStack people={[...people, { name: 'Kim Park' }]} max={3} label="Technicians" />);
-    expect(screen.getByText('+1')).toHaveAttribute('title', 'Kim Park');
-  });
-
-  it('counts everyone not shown when the people are a sample of a larger group', () => {
-    render(<AvatarStack people={people} total={7} max={3} label="Technicians" />);
-    expect(screen.getByText('+4')).toHaveAttribute('title', '4 more');
-    expect(screen.getByRole('group')).toHaveAccessibleName(
-      'Technicians: Ada Lin, Roman Smith, Michael Johnson and 4 more',
-    );
-  });
-
-  it('shows no overflow when the sample is the whole group', () => {
-    render(<AvatarStack people={people} total={3} max={3} label="Technicians" />);
-    expect(screen.queryByText(/^\+/)).not.toBeInTheDocument();
-  });
-});

package/src/stories/FaeLayoutV2.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { useState } from 'react';
-
-import { ChatInput } from '../components/chat/chat-input';
-import { ChatListEmptyState } from '../components/chat/chat-list-empty-state';
-import { ChatMessageList } from '../components/chat/chat-message-list';
-import { ChatListItem, ChatNavSidebar } from '../components/chat/chat-nav-sidebar';
-import { ChatTopNavigation } from '../components/chat/chat-top-navigation';
-import { MspOrganizationCard } from '../components/chat/msp-organization-card';
-import type { Message } from '../components/chat/types/message.types';
-import { OpenFrameLogo } from '../components/icons';
-import {
-  ChatPlusIcon,
-  ChatQuestionIcon,
-  ChatsIcon,
-  CheckCircleIcon,
-  ClockHistoryIcon,
-  DotsLoaderIcon,
-  HourglassClockIcon,
-  MessageIndicatorIcon,
-  UserCheckIcon,
-} from '../components/icons-v2-generated';
-import { Button } from '../components/ui/button';
-import { withFaeBrand } from './fae-brand-decorator';
-
-const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
-
-const THREAD: Message[] = [
-  {
-    id: 'u1',
-    role: 'user',
-    name: 'John Smith',
-    content: 'My laptop has been running really slowly lately',
-    timestamp: at(47),
-  },
-  {
-    id: 'a1',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    content: "I'll run a quick diagnostic to identify what's causing the performance issues.",
-    timestamp: at(47),
-  },
-];
-
-const CHATS = [
-  { id: '1', title: 'Slow Laptop', mark: <DotsLoaderIcon className="text-ods-accent" /> },
-  { id: '2', title: 'Forgot my password' },
-  { id: '3', title: 'Teams mic not working', mark: <HourglassClockIcon className="text-ods-accent" /> },
-  { id: '4', title: 'Email not syncing on phone', mark: <MessageIndicatorIcon className="text-ods-accent" /> },
-  { id: '5', title: 'Blue screen on startup', resolved: true },
-];
-
-function Layout({ withChats, withThread }: { withChats: boolean; withThread: boolean }) {
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-  return (
-    <div data-surface="brand-tinted" className="flex h-[800px] w-[1024px] border-t border-ods-border bg-ods-bg">
-      {sidebarOpen && (
-        <ChatNavSidebar
-          logo={
-            <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
-              <OpenFrameLogo
-                className="size-6"
-                lowerPathColor="var(--ods-open-yellow-base)"
-                upperPathColor="var(--color-text-primary)"
-              />
-              <span className="text-wordmark">OpenFrame</span>
-            </span>
-          }
-          items={[
-            { id: 'new', label: 'Start New Chat', icon: <ChatPlusIcon />, active: !withThread },
-            { id: 'archive', label: 'Chat Archive', icon: <ClockHistoryIcon /> },
-            { id: 'guide', label: 'What to ask Fae?', icon: <ChatQuestionIcon /> },
-          ]}
-          sectionLabel="Your Current Chats"
-          footer={<MspOrganizationCard variant="footer" name="TechFlow Solutions" onOpenWebsite={() => undefined} />}
-        >
-          {withChats ? (
-            CHATS.map((chat, i) => (
-              <ChatListItem
-                key={chat.id}
-                title={chat.title}
-                subtitle="Ticket Number: 1932"
-                active={withThread && i === 0}
-                leading={chat.resolved ? <CheckCircleIcon className="text-ods-success" /> : undefined}
-                trailing={chat.mark}
-              />
-            ))
-          ) : (
-            <ChatListEmptyState
-              icon={<ChatsIcon size={24} />}
-              title="No Current Chats"
-              description="Your conversations will show here"
-            />
-          )}
-        </ChatNavSidebar>
-      )}
-      <div className="flex min-w-0 flex-1 flex-col">
-        <ChatTopNavigation
-          name="Fae"
-          subtitle="Your AI Assistant"
-          sidebarOpen={sidebarOpen}
-          onToggleSidebar={() => setSidebarOpen(open => !open)}
-          onOpenSettings={() => undefined}
-          actions={
-            <Button variant="outline" size="small" leftIcon={<UserCheckIcon />}>
-              Request a Technician
-            </Button>
-          }
-        />
-        <main className="ods-glow-accent-corner flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)] pt-[var(--spacing-system-mf)]">
-          {withThread ? (
-            <ChatMessageList
-              messages={THREAD}
-              assistantType="fae"
-              approvalVariant="client"
-              appearance="v2"
-              fullWidth
-              contentClassName="px-0"
-              autoScroll={false}
-            />
-          ) : (
-            <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-[var(--spacing-system-l)]">
-              <div className="flex flex-col gap-[var(--spacing-system-xsf)] text-center">
-                <h1 className="text-ods-text-primary text-h2">Hi, I&apos;m your IT assistant</h1>
-                <p className="text-ods-text-secondary text-h4">
-                  Having trouble with your computer, email, Wi-Fi, or software? Just describe it.
-                </p>
-              </div>
-            </div>
-          )}
-          <ChatInput fullWidth appearance="v2" placeholder="Enter your request here..." />
-        </main>
-      </div>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Layout> = {
-  decorators: [withFaeBrand],
-  title: 'Chat/Fae Layout v2',
-  component: Layout,
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Layout>;
-
-export const StartEmpty: Story = { args: { withChats: false, withThread: false } };
-export const ChatOpen: Story = { args: { withChats: true, withThread: true } };

package/src/stories/FaeOnboardingV2.stories.tsx

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-
-import { OnboardingCarousel, type OnboardingCarouselStep } from '../components/chat/onboarding-carousel';
-import { PoweredByFlamingo } from '../components/features/auth/auth-branding';
-import { OpenFrameLogo } from '../components/icons';
-import { ClockCheckIcon, MessagesIcon, UserCheckIcon } from '../components/icons-v2-generated';
-import { SquareAvatar } from '../components/ui/square-avatar';
-import { withFaeBrand } from './fae-brand-decorator';
-
-const STEPS: OnboardingCarouselStep[] = [
-  {
-    id: 'meet',
-    icon: <SquareAvatar variant="round" sizePx={28} fallback="Fae" />,
-    title: 'Meet Your AI IT Assistant',
-    description: 'Fixes what it can right away,\nand hands off the rest to your technicians.',
-  },
-  {
-    id: 'type',
-    icon: <MessagesIcon size={28} />,
-    title: "Type what's going on.",
-    description:
-      "Your assistant troubleshoots first.\nAnything it can't solve goes to your technician with full context.",
-  },
-  {
-    id: 'human',
-    icon: <UserCheckIcon size={28} />,
-    title: 'Need a human?',
-    description: 'Skip the chat and create a ticket.\nIt goes straight to your technicians.',
-  },
-  {
-    id: 'anytime',
-    icon: <ClockCheckIcon size={28} />,
-    title: 'Ask anything, anytime.',
-    description: 'No hold music, no queue.\nJust immediate help.',
-  },
-];
-
-function Screen() {
-  return (
-    <div className="flex h-[800px] w-[1024px] flex-col items-center gap-[calc(2*var(--spacing-system-xlf))] bg-ods-bg px-[calc(2*var(--spacing-system-xlf))] py-[var(--spacing-system-xl)]">
-      <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
-        <OpenFrameLogo
-          className="size-6"
-          lowerPathColor="var(--ods-open-yellow-base)"
-          upperPathColor="var(--color-text-primary)"
-        />
-        <span className="text-wordmark">OpenFrame</span>
-      </span>
-      {/* The side cards run to the window edge, past the screen padding. */}
-      <div className="-mx-[calc(2*var(--spacing-system-xlf))] flex min-h-0 flex-1 self-stretch">
-        <OnboardingCarousel steps={STEPS} onComplete={() => undefined} />
-      </div>
-      <PoweredByFlamingo />
-    </div>
-  );
-}
-
-const meta: Meta<typeof Screen> = {
-  decorators: [withFaeBrand],
-  title: 'Chat/Fae Onboarding v2',
-  component: Screen,
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Screen>;
-
-export const Introduction: Story = {};

package/src/stories/FaeThreadV2.stories.tsx

@@ -1,192 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-
-import { ChatInput } from '../components/chat/chat-input';
-import { ChatMessageList } from '../components/chat/chat-message-list';
-import type { ChatAppearance } from '../components/chat/types/chat.types';
-import type { Message } from '../components/chat/types/message.types';
-import { withFaeBrand } from './fae-brand-decorator';
-
-const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
-
-// The "Admin joins" frame of the fae chat v2 escalation flow: a user request,
-// an escalation offer the user approved, the hand-off and join receipts, then
-// the technician's reply.
-const ESCALATION_THREAD: Message[] = [
-  {
-    id: 'u1',
-    role: 'user',
-    name: 'John Smith',
-    content: 'My laptop has been running really slowly lately',
-    timestamp: at(47),
-  },
-  {
-    id: 'a1',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    content: 'Sorry, I can’t help with this problem',
-    timestamp: at(47),
-  },
-  { id: 'u2', role: 'user', name: 'John Smith', content: 'call the admin', timestamp: at(47) },
-  {
-    id: 'a2',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    timestamp: at(47),
-    content: [
-      {
-        type: 'escalation_offer',
-        status: 'approved',
-        resolvedByName: 'User',
-        data: {
-          offerId: 'offer-1',
-          text: 'Having issues with the AI assistant? This ticket can be handed off to a technician. Fae will no longer respond in this conversation. A technician will review the ticket and reply when available.',
-        },
-      },
-      { type: 'ticket_escalated', data: { ticketId: 't-1', reason: 'MANUAL' } },
-      {
-        type: 'error',
-        title: 'AI response error',
-        details: 'Something went wrong. Please try again.',
-      },
-    ],
-  },
-  {
-    id: 's1',
-    role: 'user',
-    authorType: 'system',
-    name: 'Michael Johnson joined the chat',
-    content: '',
-    timestamp: at(48),
-  },
-  {
-    id: 't1',
-    role: 'assistant',
-    name: 'Michael Johnson',
-    authorType: 'admin',
-    content: 'I’ll do it faster',
-    timestamp: at(48),
-  },
-  { id: 'u3', role: 'user', name: 'John Smith', content: 'Cool!', timestamp: at(48) },
-];
-
-const APPROVAL_THREAD: Message[] = [
-  {
-    id: 'u1',
-    role: 'user',
-    name: 'John Smith',
-    content: 'My laptop has been running really slowly lately',
-    timestamp: at(47),
-  },
-  {
-    id: 'a1',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    content:
-      'I found that your C: drive is 89% full. I can clean up temporary files to free some space - may I proceed with clearing C:/temp?',
-    timestamp: at(47),
-  },
-  {
-    id: 'a2',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    timestamp: at(47),
-    content: [
-      {
-        type: 'approval_request',
-        status: 'pending',
-        data: {
-          requestId: 'req-1',
-          command: 'Remove-Item C:\\Temp\\* -Recurse',
-          explanation: 'Clears temporary files in C:\\Temp to free disk space.',
-        },
-        onApprove: () => undefined,
-        onReject: () => undefined,
-      },
-    ],
-  },
-];
-
-function Thread({
-  messages,
-  appearance,
-  handedOff,
-}: {
-  messages: Message[];
-  appearance: ChatAppearance;
-  handedOff?: boolean;
-}) {
-  return (
-    <div className="flex h-[720px] w-[728px] flex-col bg-ods-bg">
-      <ChatMessageList
-        messages={messages}
-        assistantType="fae"
-        approvalVariant="client"
-        appearance={appearance}
-        fullWidth
-        autoScroll={false}
-      />
-      <div className="px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
-        <ChatInput
-          fullWidth
-          placeholder="Enter your request here..."
-          awaitingResponse={handedOff}
-          appearance={appearance}
-          awaitingTeam={[
-            { key: '1', name: 'Roman Smith' },
-            { key: '2', name: 'Ada Lin' },
-            { key: '3', name: 'Michael Johnson' },
-          ]}
-        />
-      </div>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Thread> = {
-  decorators: [withFaeBrand],
-  title: 'Chat/Fae Thread v2',
-  component: Thread,
-  parameters: { layout: 'centered' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Thread>;
-
-export const EscalationV2: Story = { args: { messages: ESCALATION_THREAD, appearance: 'v2', handedOff: true } };
-export const EscalationClassic: Story = {
-  args: { messages: ESCALATION_THREAD, appearance: 'classic', handedOff: true },
-};
-
-const approvalCard = (id: string, status: 'approved' | 'rejected' | 'cancelled', resolvedByName: string) => ({
-  type: 'approval_request' as const,
-  status,
-  resolvedByName,
-  data: {
-    requestId: id,
-    command: 'Remove-Item C:\\Temp\\* -Recurse',
-    explanation: 'Clears temporary files in C:\\Temp.',
-  },
-});
-
-const APPROVAL_STATES_THREAD: Message[] = [
-  {
-    id: 'a1',
-    role: 'assistant',
-    name: 'Fae',
-    assistantType: 'fae',
-    timestamp: at(47),
-    content: [
-      approvalCard('r1', 'approved', 'Michael Johnson'),
-      approvalCard('r2', 'rejected', 'Michael Johnson'),
-      approvalCard('r3', 'cancelled', 'Michael Johnson'),
-    ],
-  },
-];
-
-export const ApprovalV2: Story = { args: { messages: APPROVAL_THREAD, appearance: 'v2' } };
-
-export const ApprovalStatesV2: Story = { args: { messages: APPROVAL_STATES_THREAD, appearance: 'v2' } };

package/src/stories/fae-brand-decorator.tsx

@@ -1,28 +0,0 @@
-import type { Decorator } from '@storybook/nextjs-vite';
-import { useLayoutEffect, type ReactNode } from 'react';
-
-/**
- * Renders a story in the Fae client's default brand. The chat app sets
- * `data-app-type="flamingo"` on <html> before first paint, which points the
- * accent tokens at flamingo pink; without it Storybook falls back to the
- * OpenFrame yellow and a Fae screen shows two brand colours at once. Restores
- * the previous value so the next story is unaffected.
- */
-function FaeBrand({ children }: { children: ReactNode }) {
-  useLayoutEffect(() => {
-    const root = document.documentElement;
-    const previous = root.getAttribute('data-app-type');
-    root.setAttribute('data-app-type', 'flamingo');
-    return () => {
-      if (previous === null) root.removeAttribute('data-app-type');
-      else root.setAttribute('data-app-type', previous);
-    };
-  }, []);
-  return <>{children}</>;
-}
-
-export const withFaeBrand: Decorator = Story => (
-  <FaeBrand>
-    <Story />
-  </FaeBrand>
-);