@od-oneapp/uni-ui 2026.1.1301

package/src/components/ai-elements/ai-elements.constants.ts

@@ -0,0 +1,516 @@
+/**
+ * @fileoverview AI Elements Design System Constants
+ * AI Elements Design System Constants
+ *
+ * Unified visual language for all AI chat components.
+ * All values reference the design token system.
+ *
+ * @module @od-oneapp/uni-ui/components/ai-elements/ai-elements.constants
+ */
+
+// ============================================
+// SPACING SCALE (from tokens/spacing.ts)
+// ============================================
+
+/**
+ * Standard spacing values for AI elements
+ * Using consistent scale: 2 (8px), 3 (12px), 4 (16px)
+ */
+export const AI_SPACING = {
+  /** Tight spacing between related items (8px) */
+  xs: 'gap-2',
+  /** Standard spacing between items (12px) */
+  sm: 'gap-3',
+  /** Comfortable spacing between sections (16px) */
+  md: 'gap-4',
+  /** Large spacing between major sections (24px) */
+  lg: 'gap-6',
+} as const;
+
+/**
+ * Standard padding for AI element containers
+ */
+export const AI_PADDING = {
+  /** Compact padding for inline elements */
+  compact: 'p-2',
+  /** Standard padding for cards/containers */
+  standard: 'p-3',
+  /** Comfortable padding for larger containers */
+  comfortable: 'p-4',
+} as const;
+
+/**
+ * Standard internal spacing (space-y for vertical stacking)
+ */
+export const AI_STACK = {
+  /** Tight stacking (8px) */
+  tight: 'space-y-2',
+  /** Standard stacking (12px) */
+  standard: 'space-y-3',
+  /** Loose stacking (16px) */
+  loose: 'space-y-4',
+} as const;
+
+// ============================================
+// BORDER RADIUS (from tokens/radius.ts)
+// ============================================
+
+/**
+ * Standard border radius for AI elements
+ * Primary: rounded-lg (12px) for cards/containers
+ * Secondary: rounded-md (8px) for nested elements
+ */
+export const AI_RADIUS = {
+  /** Small radius for badges, pills (6px) */
+  sm: 'rounded-sm',
+  /** Medium radius for nested elements, inputs (8px) */
+  md: 'rounded-md',
+  /** Large radius for cards, containers (12px) - PRIMARY */
+  lg: 'rounded-lg',
+  /** Extra large for prominent elements (16px) */
+  xl: 'rounded-xl',
+  /** Full radius for circular elements */
+  full: 'rounded-full',
+} as const;
+
+/**
+ * Standard container radius - use this for all AI element cards
+ */
+export const AI_CONTAINER_RADIUS = AI_RADIUS.lg;
+
+/**
+ * Standard nested element radius - use this for elements inside containers
+ */
+export const AI_NESTED_RADIUS = AI_RADIUS.md;
+
+// ============================================
+// TYPOGRAPHY (from tokens/typography.ts)
+// ============================================
+
+/**
+ * Typography scale for AI elements
+ * Follows existing token system
+ */
+export const AI_TEXT = {
+  /** Extra small text for timestamps, metadata (10px) */
+  '2xs': 'text-2xs',
+  /** Small text for secondary info (12px) */
+  xs: 'text-xs',
+  /** Body text size (14px) - PRIMARY */
+  sm: 'text-sm',
+  /** Large body text (16px) */
+  base: 'text-base',
+  /** Heading text (18px) */
+  lg: 'text-lg',
+} as const;
+
+/**
+ * Font weights for AI elements
+ */
+export const AI_WEIGHT = {
+  /** Normal weight for body text */
+  normal: 'font-normal',
+  /** Medium weight for emphasis */
+  medium: 'font-medium',
+  /** Semibold for titles */
+  semibold: 'font-semibold',
+} as const;
+
+/**
+ * Standard title styles for AI element headers
+ */
+export const AI_TITLE = {
+  /** Primary title: sm + semibold */
+  primary: 'text-sm font-semibold text-foreground',
+  /** Secondary title: sm + medium */
+  secondary: 'text-sm font-medium text-foreground',
+  /** Tertiary/label: xs + medium + muted */
+  label: 'text-xs font-medium text-muted-foreground uppercase tracking-wide',
+} as const;
+
+/**
+ * Standard body text styles
+ */
+export const AI_BODY = {
+  /** Primary body text */
+  primary: 'text-sm text-foreground',
+  /** Secondary/muted body text */
+  secondary: 'text-sm text-muted-foreground',
+  /** Small body text */
+  small: 'text-xs text-muted-foreground',
+} as const;
+
+// ============================================
+// COLORS (from semantic tokens)
+// ============================================
+
+/**
+ * Semantic color classes for AI element states
+ */
+export const AI_COLORS = {
+  /** Default/neutral state */
+  default: {
+    bg: 'bg-card',
+    text: 'text-foreground',
+    border: 'border-border',
+  },
+  /** Muted/subtle state */
+  muted: {
+    bg: 'bg-muted',
+    text: 'text-muted-foreground',
+    border: 'border-border/50',
+  },
+  /** Success/complete state */
+  success: {
+    bg: 'bg-success/10',
+    text: 'text-success',
+    border: 'border-success/30',
+  },
+  /** Warning/pending state */
+  warning: {
+    bg: 'bg-warning/10',
+    text: 'text-warning',
+    border: 'border-warning/30',
+  },
+  /** Error/destructive state */
+  error: {
+    bg: 'bg-destructive/10',
+    text: 'text-destructive',
+    border: 'border-destructive/30',
+  },
+  /** Info/active state */
+  info: {
+    bg: 'bg-info/10',
+    text: 'text-info',
+    border: 'border-info/30',
+  },
+} as const;
+
+// ============================================
+// CONTAINER STYLES
+// ============================================
+
+/**
+ * Standard AI element container styles
+ * Use these for visual consistency across all AI components
+ */
+export const AI_CONTAINER = {
+  /**
+   * Card container - bordered card with standard padding
+   * Use for: Tool, Task, Artifact, Plan, Queue sections
+   */
+  card: 'bg-card border border-border rounded-lg p-3',
+
+  /**
+   * Compact card container - bordered card with minimal padding
+   * Use for: File cards, small preview cards
+   */
+  cardCompact: 'bg-card border border-border rounded-lg p-2',
+
+  /**
+   * Subtle container - muted background, no border
+   * Use for: Code blocks, nested content areas
+   */
+  subtle: 'bg-muted/50 rounded-md p-3',
+
+  /**
+   * Ghost container - transparent, minimal styling
+   * Use for: Message content, inline elements
+   */
+  ghost: 'rounded-md',
+
+  /**
+   * Elevated container - with shadow for emphasis
+   * Use for: Popovers, floating elements, Sources content
+   */
+  elevated: 'bg-popover border border-border rounded-lg p-3 shadow-md',
+
+  /**
+   * Interactive container - with hover/focus states
+   * Use for: Clickable cards, selectable items
+   */
+  interactive:
+    'bg-card border border-border rounded-lg p-3 transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring',
+} as const;
+
+/**
+ * Standard header styles for collapsible AI elements
+ * Provides consistent trigger appearance
+ */
+export const AI_HEADER = {
+  /** Full header with icon, title, and chevron */
+  base: 'flex w-full items-center gap-2 text-sm',
+  /** Muted style for collapsed state */
+  muted: 'text-muted-foreground hover:text-foreground transition-colors',
+  /** Active style for expanded state */
+  active: 'text-foreground',
+} as const;
+
+// ============================================
+// ICONS
+// ============================================
+
+/**
+ * Standard icon sizes for AI elements
+ * Use consistent sizes across all components
+ */
+export const AI_ICON = {
+  /** Small icons for inline use (14px) */
+  sm: 'size-3.5',
+  /** Default icon size (16px) - PRIMARY */
+  md: 'size-4',
+  /** Large icons for emphasis (20px) */
+  lg: 'size-5',
+} as const;
+
+/**
+ * Standard icon styling
+ */
+export const AI_ICON_STYLE = {
+  /** Muted icon for secondary elements */
+  muted: 'text-muted-foreground',
+  /** Foreground icon for primary elements */
+  default: 'text-foreground',
+  /** Icon inherits text color */
+  inherit: '',
+} as const;
+
+// ============================================
+// ANIMATIONS
+// ============================================
+
+export { SPRING_FLUID, SPRING_GENTLE, SPRING_TACTILE, SPRING_WEIGHTED } from '../../constants/motion';
+
+/**
+ * Animation class names for AI elements
+ * All respect prefers-reduced-motion via conditional application
+ */
+export const AI_ANIMATE = {
+  /** Entry animation for new messages/content */
+  entry: 'animate-message-entry',
+  /** Stagger fade for list items */
+  stagger: 'animate-stagger-fade-in',
+  /** Brain pulse for thinking state */
+  thinking: 'animate-brain-pulse',
+  /** Tool state icon transition */
+  stateChange: 'animate-tool-state-enter',
+  /** Branch slide animations */
+  slideLeft: 'animate-branch-slide-left',
+  slideRight: 'animate-branch-slide-right',
+  /** Copy success bounce */
+  copyBounce: 'animate-code-copy-bounce',
+  /** Focus pulse effect */
+  focusPulse: 'animate-focus-pulse',
+  /** Line draw for connecting lines */
+  lineDraw: 'animate-line-draw',
+  /** Popover bounce */
+  popoverBounce: 'animate-sources-bounce',
+} as const;
+
+/**
+ * Stagger delay scale for list animations (in ms)
+ */
+export const AI_STAGGER_DELAY = {
+  /** Fast stagger for actions (30ms) */
+  fast: 30,
+  /** Standard stagger for lists (50ms) */
+  standard: 50,
+  /** Slow stagger for emphasis (75ms) */
+  slow: 75,
+  /** Very slow for dramatic effect (100ms) */
+  dramatic: 100,
+} as const;
+
+/**
+ * Animation duration tokens (matching globals.css)
+ */
+export const AI_DURATION = {
+  /** Fast interactions (150ms) */
+  fast: 150,
+  /** Standard interactions (200ms) */
+  standard: 200,
+  /** Entry animations (300ms) */
+  entry: 300,
+  /** Complex animations (400ms) */
+  complex: 400,
+} as const;
+
+// ============================================
+// INTERACTION STATES
+// ============================================
+
+/**
+ * Standard interaction tokens for animations
+ */
+export const AI_INTERACTION = {
+  /** Scale for hover effects */
+  hoverScale: 1.01,
+  /** Scale for tap/click effects */
+  tapScale: 0.98,
+} as const;
+
+/**
+ * Standard hover state classes
+ */
+export const AI_HOVER = {
+  /** Background hover for cards */
+  bg: 'hover:bg-accent/50',
+  /** Text hover for links/buttons */
+  text: 'hover:text-foreground',
+  /** Combined hover effect */
+  both: 'hover:bg-accent/50 hover:text-foreground',
+} as const;
+
+/**
+ * Standard focus state classes
+ */
+export const AI_FOCUS = {
+  /** Ring focus for interactive elements */
+  ring: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  /** Subtle focus for text elements */
+  subtle: 'focus-visible:outline-none focus-visible:text-foreground',
+} as const;
+
+/**
+ * Standard disabled state classes
+ */
+export const AI_DISABLED = {
+  /** Opacity reduction */
+  opacity: 'disabled:opacity-50',
+  /** Cursor change */
+  cursor: 'disabled:cursor-not-allowed',
+  /** Combined disabled state */
+  full: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+} as const;
+
+/**
+ * Standard transition classes
+ */
+export const AI_TRANSITION = {
+  /** Color transitions */
+  colors: 'transition-colors',
+  /** Transform transitions */
+  transform: 'transition-transform',
+  /** All transitions */
+  all: 'transition-all',
+  /** Opacity transitions */
+  opacity: 'transition-opacity',
+} as const;
+
+// ============================================
+// COLLAPSIBLE PATTERNS
+// ============================================
+
+/**
+ * Standard collapsible content animations
+ * Used for Tool, Task, Reasoning, ChainOfThought, etc.
+ */
+export const AI_COLLAPSIBLE = {
+  /** Content animation classes */
+  content: [
+    'data-[state=closed]:animate-out',
+    'data-[state=open]:animate-in',
+    'data-[state=closed]:fade-out-0',
+    'data-[state=open]:fade-in-0',
+    'data-[state=closed]:slide-out-to-top-2',
+    'data-[state=open]:slide-in-from-top-2',
+  ].join(' '),
+  /** Chevron rotation */
+  chevron: 'transition-transform data-[state=open]:rotate-180',
+  /** Or group-based chevron */
+  chevronGroup: 'transition-transform group-data-[state=open]:rotate-180',
+} as const;
+
+// ============================================
+// STATUS INDICATORS
+// ============================================
+
+/**
+ * Status indicator styles for progress/state display
+ */
+export const AI_STATUS = {
+  /** Pending/waiting state */
+  pending: {
+    icon: 'text-muted-foreground',
+    text: 'text-muted-foreground',
+    bg: '',
+  },
+  /** In progress/active state */
+  active: {
+    icon: 'text-info animate-pulse',
+    text: 'text-foreground',
+    bg: '',
+  },
+  /** Completed/success state */
+  complete: {
+    icon: 'text-success',
+    text: 'text-muted-foreground',
+    bg: '',
+  },
+  /** Error/failed state */
+  error: {
+    icon: 'text-destructive',
+    text: 'text-destructive',
+    bg: 'bg-destructive/10',
+  },
+  /** Warning/attention state */
+  warning: {
+    icon: 'text-warning',
+    text: 'text-warning',
+    bg: 'bg-warning/10',
+  },
+} as const;
+
+// ============================================
+// COMPOSITE STYLES
+// ============================================
+
+/**
+ * Ready-to-use composite class strings for common patterns
+ */
+export const AI_STYLES = {
+  /**
+   * Standard AI card (Tool, Task, Artifact, etc.)
+   */
+  card: `${AI_CONTAINER.card}`,
+
+  /**
+   * Collapsible header trigger
+   */
+  trigger: `${AI_HEADER.base} ${AI_HEADER.muted} ${AI_TRANSITION.colors}`,
+
+  /**
+   * Muted content area inside cards
+   */
+  contentArea: `${AI_CONTAINER.subtle}`,
+
+  /**
+   * Interactive list item
+   */
+  listItem: `flex items-start ${AI_SPACING.xs} ${AI_PADDING.compact} ${AI_RADIUS.md} ${AI_HOVER.bg} ${AI_TRANSITION.colors}`,
+
+  /**
+   * Badge/pill styling
+   */
+  badge: `inline-flex items-center ${AI_SPACING.xs} px-2 py-0.5 ${AI_RADIUS.full} ${AI_TEXT.xs}`,
+
+  /**
+   * Action button row
+   */
+  actions: `flex items-center ${AI_SPACING.xs}`,
+} as const;
+
+// ============================================
+// TYPE EXPORTS
+// ============================================
+
+export type AISpacing = keyof typeof AI_SPACING;
+export type AIPadding = keyof typeof AI_PADDING;
+export type AIRadius = keyof typeof AI_RADIUS;
+export type AIText = keyof typeof AI_TEXT;
+export type AIWeight = keyof typeof AI_WEIGHT;
+export type AIColorScheme = keyof typeof AI_COLORS;
+export type AIContainer = keyof typeof AI_CONTAINER;
+export type AIIcon = keyof typeof AI_ICON;
+export type AIAnimate = keyof typeof AI_ANIMATE;
+export type AIStatus = keyof typeof AI_STATUS;

package/src/components/ai-elements/artifact/artifact.stories.tsx

@@ -0,0 +1,199 @@
+/**
+ * @fileoverview Artifact Component Stories
+ *
+ * Storybook v10 stories for the Artifact component showcasing AI-generated artifacts
+ * with structured headers, content, and actions.
+ *
+ * @module @od-oneapp/uni-ui/components/ai-elements/artifact.stories
+ */
+import preview from '@od-oneapp/uni-ui/storybook/preview';
+import { expect, fn, userEvent } from '@storybook/test';
+import { Download, ExternalLink } from 'lucide-react';
+import {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactClose,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle,
+} from './artifact';
+const mockOnClose = fn();
+const meta = preview.meta({
+  title: 'uni-ui/Ai Elements/Artifact',
+  component: Artifact,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A container component for displaying AI-generated artifacts with structured header, content, and action sections.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+});
+/**
+ * Default artifact with header and content
+ */
+export const Default = meta.story({
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <ArtifactTitle>Generated Document</ArtifactTitle>
+        <ArtifactActions>
+          <ArtifactClose onClick={mockOnClose} />
+        </ArtifactActions>
+      </ArtifactHeader>
+      <div className="p-4">
+        <p>This is the artifact content area.</p>
+      </div>
+    </Artifact>
+  ),
+  tags: ['docs'],
+});
+Default.test('should render artifact', async ({ canvas }) => {
+  const title = await canvas.findByText('Generated Document');
+  await expect(title).toBeInTheDocument();
+});
+/**
+ * Artifact with description
+ */
+export const WithDescription = meta.story({
+  name: 'With Description',
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <div>
+          <ArtifactTitle>Code Generation</ArtifactTitle>
+          <ArtifactDescription>React component with TypeScript</ArtifactDescription>
+        </div>
+        <ArtifactActions>
+          <ArtifactClose onClick={mockOnClose} />
+        </ArtifactActions>
+      </ArtifactHeader>
+      <div className="p-4">
+        <pre className="text-sm">const Component = () =&gt; null;</pre>
+      </div>
+    </Artifact>
+  ),
+  tags: ['docs'],
+});
+/**
+ * Artifact with action buttons
+ */
+export const WithActions = meta.story({
+  name: 'With Actions',
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <ArtifactTitle>Generated Report</ArtifactTitle>
+        <ArtifactActions>
+          <ArtifactAction icon={Download} tooltip="Download" label="Download" onClick={fn()} />
+          <ArtifactAction icon={ExternalLink} tooltip="Open" label="Open" onClick={fn()} />
+          <ArtifactClose onClick={mockOnClose} />
+        </ArtifactActions>
+      </ArtifactHeader>
+      <div className="p-4">
+        <p>Report content goes here.</p>
+      </div>
+    </Artifact>
+  ),
+  tags: ['docs'],
+});
+/**
+ * Artifact with custom content
+ */
+export const CustomContent = meta.story({
+  name: 'Custom Content',
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <ArtifactTitle>Custom Artifact</ArtifactTitle>
+        <ArtifactClose onClick={mockOnClose} />
+      </ArtifactHeader>
+      <div className="p-4">
+        <div className="space-y-2">
+          <h3 className="font-semibold">Section 1</h3>
+          <p>Content for section 1</p>
+          <h3 className="font-semibold">Section 2</h3>
+          <p>Content for section 2</p>
+        </div>
+      </div>
+    </Artifact>
+  ),
+  tags: ['docs'],
+});
+/**
+ * Close button interaction
+ */
+export const CloseInteraction = meta.story({
+  name: 'Close Interaction',
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <ArtifactTitle>Closable Artifact</ArtifactTitle>
+        <ArtifactActions>
+          <ArtifactClose onClick={mockOnClose} />
+        </ArtifactActions>
+      </ArtifactHeader>
+      <div className="p-4">Click the X button to close</div>
+    </Artifact>
+  ),
+  tags: ['docs'],
+});
+CloseInteraction.test('should render close button', async ({ canvas }: { canvas: HTMLElement }) => {
+  mockOnClose.mockClear();
+  const closeButton = await canvas.findByRole('button', { name: /close/i });
+  await expect(closeButton).toBeInTheDocument();
+});
+CloseInteraction.test('should call onClose when close clicked', async ({ canvas }) => {
+  mockOnClose.mockClear();
+  const closeButton = await canvas.findByRole('button', { name: /close/i });
+  const user = userEvent.setup();
+  await user.click(closeButton);
+  await expect(mockOnClose).toHaveBeenCalledTimes(1);
+});
+/**
+ * Keyboard navigation
+ */
+export const KeyboardNavigation = meta.story({
+  name: 'Accessibility: Keyboard Navigation',
+  render: () => (
+    <Artifact>
+      <ArtifactHeader>
+        <ArtifactTitle>Keyboard Accessible</ArtifactTitle>
+        <ArtifactActions>
+          <ArtifactClose onClick={mockOnClose} />
+        </ArtifactActions>
+      </ArtifactHeader>
+      <div className="p-4">Use Tab and Enter to interact</div>
+    </Artifact>
+  ),
+  tags: ['docs', 'a11y'],
+});
+KeyboardNavigation.test(
+  'should support keyboard focus',
+  async ({ canvas }: { canvas: HTMLElement }) => {
+    const closeButton = await canvas.findByRole('button', { name: /close/i });
+    closeButton.focus();
+    await expect(closeButton).toHaveFocus();
+  },
+);
+/**
+ * Experimental: Artifact with custom styling
+ * This story is excluded from normal browsing by default
+ */
+export const ExperimentalCustomStyling = meta.story({
+  name: 'Experimental: Custom Styling',
+  render: () => (
+    <Artifact className="border-primary border-2 shadow-lg">
+      <ArtifactHeader className="bg-primary/10">
+        <ArtifactTitle className="text-primary">Custom Styled Artifact</ArtifactTitle>
+        <ArtifactClose onClick={mockOnClose} />
+      </ArtifactHeader>
+      <div className="p-4">Custom styled content</div>
+    </Artifact>
+  ),
+  tags: ['experimental'],
+});