zidane-ui 9.1.1 → 9.1.3

package/src/chat/TextPreview.tsx

@@ -1,121 +0,0 @@
-/**
- * A text attachment's contents, sized for the lightbox: a header (icon,
- * name, language, size) over the text, highlighted by the code blocks'
- * highlighter (`useCodeHighlight`: off the main thread, in their theme). The source is a `data:` URL (an
- * attachment the page holds), decoded at once, or any URL the page can
- * fetch (the desktop app's `zg-media:` address of a saved prompt's file),
- * loaded when the preview opens. Past `{@link MAX_TEXT_PREVIEW_BYTES}` it is
- * not loaded: decoding megabytes stalls the page.
- */
-import { useEffect, useMemo, useState, type CSSProperties } from 'react';
-
-import { useCodeHighlight } from '../code/CodeHighlightProvider';
-import { decodeDataUrlAsText, detectLanguage, formatBytes } from './composer/attachment-ingest';
-import { AttachmentIcon } from './transcript/prompt';
-import { type TextPreviewSlotProps, useTranscriptRenderers } from './transcript/renderers';
-import { useChatLabels } from './useChatLabels';
-
-/** Past this size a text attachment is listed, not previewed. */
-export const MAX_TEXT_PREVIEW_BYTES = 1024 * 1024;
-
-/** What a text preview shows: the text once it is in, or that it could not be read. */
-export type AttachmentTextState = { status: 'loading' } | { status: 'ready'; text: string } | { status: 'failed' };
-
-/**
- * The text behind `src`: a `data:` URL decodes at once, any other URL is fetched.
- *
- * @param src - Where the text is.
- * @param skip - Load nothing (the file is too large to preview).
- */
-export function useAttachmentText(src: string, skip = false): AttachmentTextState {
-  const inline = src.startsWith('data:');
-  const decoded = useMemo(() => (inline && !skip ? decodeDataUrlAsText(src) : null), [inline, skip, src]);
-  const [fetched, setFetched] = useState<{ src: string; state: AttachmentTextState } | null>(null);
-
-  useEffect(() => {
-    if (inline || skip) return;
-    let cancelled = false;
-    fetch(src)
-      .then((res) => (res.ok ? res.text() : Promise.reject(new Error(String(res.status)))))
-      .then((text) => !cancelled && setFetched({ src, state: { status: 'ready', text } }))
-      .catch(() => !cancelled && setFetched({ src, state: { status: 'failed' } }));
-    return () => {
-      cancelled = true;
-    };
-  }, [inline, skip, src]);
-
-  if (decoded !== null) return { status: 'ready', text: decoded };
-  return fetched?.src === src ? fetched.state : { status: 'loading' };
-}
-
-/** Props for {@link TextPreview}: the {@link TextPreviewSlotProps} plus the root's class and style. */
-export interface TextPreviewProps extends TextPreviewSlotProps {
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The kit's text preview, the default `TextPreview` slot: the text highlighted for its language (a plain
- * `<pre>` for plain text, while the highlighter loads, or when it fails).
- *
- * @param props - The {@link TextPreviewProps}.
- */
-export function TextPreview({ name, mediaType, size, src, className, style }: TextPreviewProps) {
-  const labels = useChatLabels();
-  const { attachmentLabel } = useTranscriptRenderers();
-  const label = attachmentLabel(name);
-  // A text file reads as text: the generic file icon becomes the text one.
-  const parts = label.icon === 'i-ph-file' ? { ...label, icon: 'i-ph-file-text' } : label;
-  const tooLarge = size > MAX_TEXT_PREVIEW_BYTES;
-  const state = useAttachmentText(src, tooLarge);
-  const text = state.status === 'ready' ? state.text : '';
-  const language = useMemo(() => detectLanguage({ name, mediaType }), [name, mediaType]);
-  const html = useHighlightedHtml(text, language);
-  return (
-    <div className={['zg-lightbox-text zg-raised border', className].filter(Boolean).join(' ')} style={style}>
-      <div className="zg-lightbox-text-header">
-        <AttachmentIcon parts={parts} />
-        <span className="text-sm text-[var(--zg-text)] truncate">{parts.name}</span>
-        {parts.detail && <span className="zg-meta shrink-0">{parts.detail}</span>}
-        {!tooLarge && language !== 'plaintext' && (
-          <span className="zg-meta zg-track-chip px-1.5 py-0.5 shrink-0">{language}</span>
-        )}
-        <span className="zg-meta ml-auto shrink-0">{formatBytes(size)}</span>
-      </div>
-      {tooLarge || state.status === 'failed' ? (
-        <div className="zg-lightbox-text-empty">
-          <span className="i-ph-file-text text-[var(--zg-text-muted)] text-3xl" aria-hidden />
-          <p className={`text-sm ${tooLarge ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`}>
-            {tooLarge ? labels.previewTooLarge(name, formatBytes(size)) : labels.previewFailed(name)}
-          </p>
-        </div>
-      ) : html ? (
-        <div className="zg-lightbox-text-body zg-shiki" dangerouslySetInnerHTML={{ __html: html }} />
-      ) : (
-        <pre className="zg-lightbox-text-body">{text}</pre>
-      )}
-    </div>
-  );
-}
-
-/** `code` highlighted as `language`; `null` for plain text, while it loads, or when it fails. */
-function useHighlightedHtml(code: string, language: string): string | null {
-  const { highlighter, theme } = useCodeHighlight();
-  const skip = language === 'plaintext' || !code;
-  const [done, setDone] = useState<{ code: string; language: string; theme: string; html: string | null } | null>(null);
-  useEffect(() => {
-    if (skip) return undefined;
-    let cancelled = false;
-    const settle = (html: string | null) => !cancelled && setDone({ code, language, theme, html });
-    highlighter
-      .highlight(code, language, theme)
-      .then(settle)
-      .catch(() => settle(null));
-    return () => {
-      cancelled = true;
-    };
-  }, [skip, code, language, theme, highlighter]);
-  return !skip && done?.code === code && done.language === language && done.theme === theme ? done.html : null;
-}

package/src/chat/Throbber.tsx

@@ -1,270 +0,0 @@
-/**
- * React equivalent of the TUI `CrushThrobber`. Per-cell HSL gradient
- * cycle + staggered birth so each "busy" indicator reads as one living
- * shimmer rather than a row of independent spinners.
- *
- * Cadence: 20 fps (50 ms tick), `A → B → A → B` blend cycle, every 8th
- * tick advances the ellipsis (`'' → '.' → '..' → '...'`). Glyph pool is
- * the canonical CrushThrobber charset (hex digits + a sprinkle of
- * punctuation) so the visual signature matches the TUI when both run
- * side by side.
- *
- * Reduced-motion fallback: replace the animated row with a static dot
- * pulse — keeps the user informed that something's busy without the
- * 20fps churn that triggers vestibular issues.
- */
-import { useEffect, useId, useMemo, useState, type CSSProperties } from 'react';
-
-import { blendHsl } from 'zidane/chat/pure';
-
-import { useAppearanceReducedMotion as useReducedMotion, useTheme } from '../appearance/AppearanceProvider';
-
-const FRAME_INTERVAL_MS = 50;
-const ELLIPSIS_FRAMES = 8;
-const CHARSET = '0123456789abcdefABCDEF~!@#$£€%^&*()+=_';
-const ELLIPSIS_CYCLE = ['', '.', '..', '...'] as const;
-
-/**
- * Canonical TUI `StatusSpinner` exposes two semantic tones:
- *   - `'accent'` (default) → brand-blue, used while the agent is
- *     streaming a normal turn or a stub-handle is in flight.
- *   - `'warn'` → amber, used during auto-compaction or any
- *     destructive-ish background task so the user knows their input
- *     will land against a re-shaped context. Mirrors the canonical
- *     `<TitleOverlay variant="warn">` cue.
- *
- * Explicit `colors` still wins — variant only chooses the default pair
- * when no override is passed.
- */
-export type ThrobberVariant = 'accent' | 'warn';
-
-/** Props for {@link Throbber}. */
-export interface ThrobberProps {
-  /** Number of glyph cells. Default 15 — matches the TUI CrushThrobber. */
-  size?: number;
-
-  /** Optional override pair — wins over `variant` and `theme.colors.throbber`. */
-  colors?: readonly [string, string];
-
-  /** Semantic color tone (defaults to `'accent'`). See {@link ThrobberVariant}. */
-  variant?: ThrobberVariant;
-
-  /** Hide the trailing ellipsis (compact inline use). */
-  hideEllipsis?: boolean;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * The busy indicator: a row of glyphs cycling through the theme's throbber gradient, then an ellipsis.
- *
- * @param props - The size, colors or variant, and whether to hide the ellipsis.
- */
-export function Throbber({
-  size = 15,
-  colors,
-  variant = 'accent',
-  hideEllipsis = false,
-  className,
-  style,
-}: ThrobberProps) {
-  const theme = useTheme();
-  const extra = className ? ` ${className}` : '';
-
-  const [a, b] = useMemo<readonly [string, string]>(() => {
-    if (colors) {
-      return colors;
-    }
-
-    /*
-     * `warn` variant uses an amber→darker-amber ramp regardless of
-     * theme — the cue is "something different is happening" and a
-     * theme-matching brand color would defeat the differentiation.
-     * Hex pair mirrors `bg-amber-500` / `bg-amber-600` so the warn
-     * throbber visually anchors to the same amber the ApprovalBar
-     * pending-shield uses.
-     */
-    if (variant === 'warn') {
-      return ['var(--zg-warn)', 'color-mix(in srgb, var(--zg-warn) 55%, var(--zg-bg))'];
-    }
-
-    const fromTheme = theme.colors.throbber;
-
-    if (fromTheme) {
-      return fromTheme;
-    }
-
-    return [theme.colors.brand, theme.colors.accent];
-  }, [colors, theme, variant]);
-
-  const reducedMotion = useReducedMotion();
-  const [frame, setFrame] = useState(0);
-
-  /**
-   * Per-cell pseudo-random offset (ms) so each glyph "wakes up" at a
-   * different point in the cycle — gives the row that staggered breath
-   * instead of a synchronized blink. Seeded from the instance's `useId`:
-   * each throbber has its own pattern, a server render and its hydration
-   * draw the same one, and it never reshuffles on a prop tick.
-   */
-  const id = useId();
-  const [cellOffsets, cellCharSeeds] = useMemo(() => {
-    const offsets = new Array<number>(size);
-    const chars = new Array<number>(size);
-    let seed = hashString(id);
-
-    for (let i = 0; i < size; i++) {
-      seed = nextSeed(seed);
-      offsets[i] = seed % 1000;
-      seed = nextSeed(seed);
-      chars[i] = seed % CHARSET.length;
-    }
-
-    return [offsets, chars] as const;
-  }, [id, size]);
-
-  useEffect(() => {
-    if (reducedMotion) {
-      return undefined;
-    }
-
-    const id = window.setInterval(() => {
-      setFrame((f) => f + 1);
-    }, FRAME_INTERVAL_MS);
-
-    return () => {
-      window.clearInterval(id);
-    };
-  }, [reducedMotion]);
-
-  if (reducedMotion) {
-    return (
-      <ReducedMotionFallback
-        size={size}
-        colorA={a}
-        colorB={b}
-        hideEllipsis={hideEllipsis}
-        className={extra}
-        style={style}
-      />
-    );
-  }
-
-  /**
-   * Two-segment triangle wave over the cycle:
-   *   t = 0   → A
-   *   t = 0.5 → B
-   *   t = 1   → A
-   * so the gradient pulses A→B→A→B rather than snapping back from B to
-   * A. The cycle period is 1000ms (20 frames @ 50ms); we add the
-   * per-cell offset to phase each glyph independently.
-   */
-  const tickMs = frame * FRAME_INTERVAL_MS;
-  const ellipsis = hideEllipsis ? '' : ELLIPSIS_CYCLE[Math.floor(frame / ELLIPSIS_FRAMES) % ELLIPSIS_CYCLE.length];
-
-  return (
-    <span
-      className={`inline-flex items-baseline font-mono text-zg-ui tabular-nums select-none${extra}`}
-      style={style}
-      aria-busy="true"
-    >
-      <span className="inline-flex">
-        {Array.from({ length: size }).map((_, i) => {
-          const phase = ((tickMs + cellOffsets[i]) % 1000) / 1000;
-          const wave = phase < 0.5 ? phase * 2 : (1 - phase) * 2;
-          const color = blendHsl(a, b, wave);
-
-          /**
-           * Char rotation: shift through the glyph pool every frame
-           * plus the per-cell seed. 7 = coprime with 38 so the whole
-           * charset cycles per cell without the row syncing into a
-           * marching pattern.
-           */
-          const charIdx = (frame + cellCharSeeds[i] + i * 7) % CHARSET.length;
-
-          return (
-            <span key={i} style={{ color }}>
-              {CHARSET[charIdx]}
-            </span>
-          );
-        })}
-      </span>
-      {!hideEllipsis && (
-        <span className="inline-block w-[3ch] text-left" style={{ color: a }} aria-hidden="true">
-          {ellipsis}
-        </span>
-      )}
-    </span>
-  );
-}
-
-function hashString(s: string): number {
-  let h = 2166136261;
-  for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619);
-  return h >>> 0;
-}
-
-/** One xorshift32 step: a deterministic stream of unsigned ints. */
-function nextSeed(x: number): number {
-  x ^= x << 13;
-  x ^= x >>> 17;
-  x ^= x << 5;
-  return x >>> 0;
-}
-
-/**
- * Reduced-motion fallback for the throbber's animated row.
- */
-function ReducedMotionFallback({
-  size,
-  colorA,
-  colorB,
-  hideEllipsis,
-  className,
-  style,
-}: {
-  size: number;
-  colorA: string;
-  colorB: string;
-  hideEllipsis: boolean;
-  className: string;
-  style: CSSProperties | undefined;
-}) {
-  /**
-   * Static gradient row + a single low-frequency opacity pulse on the
-   * dot to the right. The CSS `zg-dot` keyframe already exists at the
-   * 2s+ cadence reduced-motion users tolerate; we reuse it rather than
-   * inventing a new one.
-   */
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 font-mono text-zg-ui tabular-nums select-none${className}`}
-      style={style}
-      aria-busy="true"
-    >
-      <span
-        className="inline-block"
-        style={{
-          background: `linear-gradient(90deg, ${colorA}, ${colorB}, ${colorA})`,
-          WebkitBackgroundClip: 'text',
-          backgroundClip: 'text',
-          color: 'transparent',
-        }}
-      >
-        {'•'.repeat(size)}
-      </span>
-      {!hideEllipsis && (
-        <span
-          className="inline-block w-1.5 h-1.5 rounded-full"
-          style={{
-            background: colorA,
-            animation: 'zg-dot 2s ease-in-out infinite',
-          }}
-          aria-hidden="true"
-        />
-      )}
-    </span>
-  );
-}