Scan Line New

import { useState, type ReactNode } from 'react';
import { Pills, ThinkingLabel, TONES, type ThinkingState, type Tone } from './shared';
import { Sparkles } from 'lucide-react';
import { cn } from '@/lib/cn';

export type ScanVariant = 'line' | 'shimmer';

export type ScanLineProps = {
  variant?: ScanVariant;
  tone?: Tone;
  state?: ThinkingState;
  /** Seconds per pass. */
  speed?: number;
  className?: string;
  children?: ReactNode;
};

const KEYFRAMES = `
@keyframes nui-scan-y { 0% { top: -10% } 100% { top: 105% } }
@keyframes nui-scan-x { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .nui-scan * { animation: none !important } }
`;

/** Wraps any block (card, text, image) and scans a light across it while the agent reads. */
export function ScanLine({ variant = 'line', tone = 'sky', state = 'thinking', speed = 1.8, className, children }: ScanLineProps) {
  const c = TONES[tone];
  const on = state === 'thinking';
  return (
    <div className={cn('nui-scan relative overflow-hidden', className)} aria-busy={on}>
      <style>{KEYFRAMES}</style>
      {children}
      {on && variant === 'line' && (
        <>
          <span aria-hidden className="pointer-events-none absolute inset-x-0 h-12" style={{ background: `linear-gradient(180deg, transparent, ${c.main}1f 70%, transparent)`, animation: `nui-scan-y ${speed}s cubic-bezier(.4,0,.2,1) infinite` }}>
            <span className="absolute inset-x-0 bottom-3 h-px" style={{ background: `linear-gradient(90deg, transparent, ${c.soft}, transparent)`, boxShadow: `0 0 10px ${c.main}` }} />
          </span>
        </>
      )}
      {on && variant === 'shimmer' && (
        <span aria-hidden className="pointer-events-none absolute inset-0" style={{ background: `linear-gradient(100deg, transparent 30%, ${c.soft}22 50%, transparent 70%)`, animation: `nui-scan-x ${speed}s ease-in-out infinite` }} />
      )}
      {state === 'done' && <span aria-hidden className="pointer-events-none absolute inset-0 rounded-[inherit]" style={{ boxShadow: `inset 0 0 0 1px ${c.main}55` }} />}
    </div>
  );
}

function Skeleton() {
  return (
    <div className="space-y-2.5">
      {[92, 78, 85, 60].map((w, i) => (
        <span key={i} className="block h-2.5 rounded-full bg-white/[0.07]" style={{ width: `${w}%` }} />
      ))}
    </div>
  );
}

const VARIANTS = ['line', 'shimmer'] as const;
const STATES = ['idle', 'thinking', 'done'] as const;

export function ScanLineDemo() {
  const [variant, setVariant] = useState<ScanVariant>('line');
  const [state, setState] = useState<ThinkingState>('thinking');
  return (
    <div className="mx-auto flex w-full max-w-xl flex-col gap-5">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Pills label="Variant" value={variant} options={VARIANTS} onChange={setVariant} />
        <Pills label="State" value={state} options={STATES} onChange={setState} />
      </div>
      <div className="grid gap-4 sm:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
        <ScanLine variant={variant} state={state} className="rounded-2xl bg-ink-900 p-4 shadow-card">
          <p className="font-mono text-[10px] uppercase tracking-wider text-ink-500">contract_v3.pdf · page 4</p>
          <p className="mt-2 text-sm leading-relaxed text-ink-200">The supplier shall deliver all goods within thirty (30) days of the purchase order date, unless agreed otherwise in writing by both parties.</p>
        </ScanLine>
        <ScanLine variant={variant} state={state} tone="violet" speed={2.2} className="rounded-2xl bg-ink-900 p-4 shadow-card">
          <Skeleton />
        </ScanLine>
      </div>
      <div className="flex items-start gap-3 rounded-2xl bg-ink-900 p-4 shadow-card">
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-brand-300"><Sparkles className="h-4 w-4" /></span>
        <div className="min-w-0 flex-1 pt-1.5">
          {state === 'done' ? <span className="text-sm text-ink-300">Read 4 pages · found 2 clauses</span> : <ThinkingLabel>Reading contract_v3.pdf…</ThinkingLabel>}
        </div>
      </div>
    </div>
  );
}

import { useEffect, useState, type ReactNode } from 'react';
import { Sparkles } from 'lucide-react';
import { cn } from '@/lib/cn';

export type ThinkingState = 'idle' | 'thinking' | 'done';

export const TONES = {
  sky: { main: '#38bdf8', soft: '#7dd3fc', deep: '#0284c7' },
  violet: { main: '#a78bfa', soft: '#c4b5fd', deep: '#7c3aed' },
  emerald: { main: '#34d399', soft: '#6ee7b7', deep: '#059669' },
  amber: { main: '#fbbf24', soft: '#fcd34d', deep: '#d97706' },
  white: { main: '#e5e7eb', soft: '#f9fafb', deep: '#9ca3af' },
} as const;
export type Tone = keyof typeof TONES;

export function usePrefersReducedMotion() {
  const [reduce, setReduce] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduce(mq.matches);
    const on = () => setReduce(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  return reduce;
}

/** Ticks a frame counter at `fps` while active. */
export function useTick(active: boolean, fps = 12) {
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!active) return;
    const id = window.setInterval(() => setN((v) => v + 1), 1000 / fps);
    return () => window.clearInterval(id);
  }, [active, fps]);
  return n;
}

export function Pills<T extends string>({ value, options, onChange, label }: { value: T; options: readonly T[]; onChange: (v: T) => void; label: string }) {
  return (
    <div role="radiogroup" aria-label={label} className="flex flex-wrap gap-1 rounded-xl bg-white/[0.03] p-1 ring-1 ring-white/5">
      {options.map((o) => (
        <button
          key={o}
          role="radio"
          aria-checked={value === o}
          onClick={() => onChange(o)}
          className={cn(
            'focus-ring rounded-lg px-2.5 py-1 text-xs capitalize transition-colors',
            value === o ? 'bg-white/10 text-ink-50 shadow-hairline' : 'text-ink-400 hover:text-ink-200',
          )}
        >
          {o}
        </button>
      ))}
    </div>
  );
}

/** Standard showcase: variant pills, a size ladder and an inline chat row. */
export function Showcase({ controls, sizes, chat, footer }: { controls: ReactNode; sizes: ReactNode; chat: ReactNode; footer?: ReactNode }) {
  return (
    <div className="mx-auto flex w-full max-w-xl flex-col gap-5">
      <div className="flex flex-wrap items-center justify-center gap-2">{controls}</div>
      <div className="flex min-h-[112px] flex-wrap items-center justify-center gap-x-10 gap-y-6 rounded-2xl bg-ink-900/80 px-6 py-7 shadow-card">{sizes}</div>
      <div className="flex items-start gap-3 rounded-2xl bg-ink-900 p-4 shadow-card">
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/15 text-brand-300">
          <Sparkles className="h-4 w-4" />
        </span>
        <div className="min-w-0 flex-1 pt-1.5">{chat}</div>
      </div>
      {footer}
    </div>
  );
}

export function Size({ px, children }: { px: number; children: ReactNode }) {
  return (
    <div className="flex flex-col items-center gap-2.5">
      <div className="flex h-16 items-center justify-center">{children}</div>
      <span className="font-mono text-[10px] tabular-nums text-ink-500">{px}px</span>
    </div>
  );
}

export function ThinkingLabel({ children = 'Thinking…' }: { children?: ReactNode }) {
  return <span className="shimmer-text text-sm font-medium">{children}</span>;
}