zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/useWheelHoverPause.ts

@@ -1,79 +0,0 @@
-/**
- * No hover while the wheel scrolls.
- *
- * A trackpad scroll leaves the pointer over the transcript, so every frame
- * slides new rows under it: hover styles flip (menu dots fade, chips lift),
- * pointer-enter handlers run, and the browser restyles and repaints on the
- * main thread. That is the stutter a scrollbar drag never shows (its pointer
- * sits on the bar). While wheel events keep coming, the content takes no
- * pointer events (`[data-wheeling]` in transcript.css); hover comes back
- * `IDLE_MS` after the last one, or as soon as the pointer really moves.
- *
- * Only a wheel that scrolls the transcript itself pauses. One a box inside
- * it takes (a tool's output, a code block) leaves the rows alone: nothing
- * slides under the pointer, and a trackpad's events never lapse, so a pause
- * would send its next swipe past the box to the transcript.
- */
-import { useEffect, type RefObject } from 'react';
-
-const IDLE_MS = 150;
-/** A pointer that moved this far wants to interact again. */
-const MOVE_PX = 3;
-
-/** Does an element between `target` and `root` still scroll by `deltaY`? */
-function nestedScrollTakes(target: EventTarget | null, root: HTMLElement, deltaY: number): boolean {
-  for (let el = target instanceof Element ? target : null; el && el !== root; el = el.parentElement) {
-    if (el.scrollHeight <= el.clientHeight) continue;
-    const overflow = getComputedStyle(el).overflowY;
-    if (overflow !== 'auto' && overflow !== 'scroll') continue;
-    if (deltaY < 0 ? el.scrollTop > 0 : el.scrollTop + el.clientHeight < el.scrollHeight - 1) return true;
-  }
-  return false;
-}
-
-/**
- * Pauses hover effects while the wheel scrolls the transcript, so rows passing under the pointer don't light up.
- *
- * @param scrollRef - The transcript's scroll container.
- */
-export function useWheelHoverPause(scrollRef: RefObject<HTMLElement | null>): void {
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return undefined;
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    let at: { x: number; y: number } | null = null;
-
-    const release = () => {
-      if (timer) clearTimeout(timer);
-      timer = null;
-      at = null;
-      delete el.dataset.wheeling;
-    };
-    const onWheel = (e: WheelEvent) => {
-      // Horizontal-only wheels (a code block's own scroll) leave the rows where they are.
-      if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
-      if (!timer) {
-        if (nestedScrollTakes(e.target, el, e.deltaY)) return;
-        el.dataset.wheeling = '';
-        at = { x: e.clientX, y: e.clientY };
-      } else {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(release, IDLE_MS);
-    };
-    const onPointer = (e: PointerEvent) => {
-      if (!at) return;
-      if (e.type === 'pointerdown' || Math.hypot(e.clientX - at.x, e.clientY - at.y) >= MOVE_PX) release();
-    };
-
-    el.addEventListener('wheel', onWheel, { passive: true });
-    el.addEventListener('pointermove', onPointer, { passive: true });
-    el.addEventListener('pointerdown', onPointer, { passive: true });
-    return () => {
-      release();
-      el.removeEventListener('wheel', onWheel);
-      el.removeEventListener('pointermove', onPointer);
-      el.removeEventListener('pointerdown', onPointer);
-    };
-  }, [scrollRef]);
-}

package/src/chat/transcript/user-bash.tsx

@@ -1,134 +0,0 @@
-/**
- * A user's `!` shell run: `! <command>` while it runs (the gutter Dot orbits; a stop
- * button when the app can cancel, `TranscriptActions.cancelTool`) or its
- * exit badge, over a monospace tail of the merged output.
- */
-import { memo, useMemo, type CSSProperties } from 'react';
-
-import { Crossfade } from '../../motion/swap';
-import type { Row } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useTranscriptActions } from './actions';
-import type { LineState } from './frame';
-import { CODE_PANEL, ToolTiming } from './tool-parts';
-
-/**
- * Rolling tail window for `!` shell output — mirrors the TUI's
- * `BASH_STREAM_TAIL_LINES`. `showFull` (the app's "full shell output"
- * setting) lifts it.
- */
-const USER_BASH_TAIL_LINES = 10;
-
-/** Props for {@link UserBashRow}. */
-export interface UserBashRowProps {
-  /** The `!` shell run: its command, state, exit and output. */
-  row: Extract<Row, { kind: 'user-bash' }>;
-  /** Shows the whole output instead of its last lines (the app's "full shell output" setting). */
-  showFull: boolean;
-  /**
-   * The command's state when the transcript draws no row icons: `running`
-   * sweeps over the command. A failure needs nothing, its badge says it.
-   */
-  lineState?: LineState;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Dedicated row for user-initiated `!` shell runs: `! <command>` header
- * with a stop button while running / an exit-code badge after, and a monospace tail window of
- * the merged output (last 10 lines by default, full when `showFull` is
- * on). Live streaming and reloaded transcripts render identically — both
- * read the same persisted result text.
- */
-export const UserBashRow = memo(({ row, showFull, lineState, className, style }: UserBashRowProps) => {
-  const labels = useChatLabels();
-  const { sessionId, cancelTool } = useTranscriptActions();
-  const display = useMemo(() => {
-    if (row.result === null) {
-      return null;
-    }
-
-    if (showFull) {
-      return row.result;
-    }
-
-    const lines = row.result.split('\n');
-
-    if (lines.length <= USER_BASH_TAIL_LINES) {
-      return row.result;
-    }
-
-    return `${labels.earlierLines(lines.length - USER_BASH_TAIL_LINES)}\n${lines
-      .slice(lines.length - USER_BASH_TAIL_LINES)
-      .join('\n')}`;
-  }, [row.result, showFull, labels]);
-
-  const badge = (() => {
-    if (row.running) {
-      return (
-        <span className="inline-flex items-center gap-1.5 self-center">
-          {/* The gutter Dot orbits while the command runs (and is aria-hidden):
-              this is its one text equivalent. */}
-          <span className="sr-only">{labels.stepRunning}</span>
-          {/* Cancel affordance for a runaway command — the row's callId
-              resolves the live run on the host. */}
-          {cancelTool && sessionId && row.callId && (
-            <button
-              type="button"
-              aria-label={labels.stopCommand}
-              title={labels.stopCommand}
-              onClick={(event) => {
-                event.stopPropagation();
-                cancelTool(row.callId!);
-              }}
-              className="zg-press-subtle inline-flex items-center justify-center w-4 h-4 rounded-zg-xs border-0 bg-transparent cursor-pointer text-[var(--zg-text-muted)] hover:text-zg-danger hover:before:bg-zg-danger/10 transition-colors p-0"
-            >
-              <span aria-hidden className="i-ph-stop-fill text-zg-badge" />
-            </button>
-          )}
-        </span>
-      );
-    }
-
-    if (row.errored) {
-      return <span className="text-zg-danger text-zg-meta">{labels.stepFailed}</span>;
-    }
-
-    if (row.exit === null) {
-      return null;
-    }
-
-    const label = row.exit.cancelled
-      ? labels.shellCancelled
-      : row.exit.code === null
-        ? labels.shellKilled
-        : labels.shellExit(row.exit.code);
-    const color = !row.exit.cancelled && row.exit.code === 0 ? 'text-zg-success' : 'text-zg-danger';
-
-    return (
-      <span className="zg-meta inline-flex items-baseline gap-1.5">
-        <span className={color}>{label}</span>
-        <ToolTiming durationMs={row.exit.durationMs} />
-      </span>
-    );
-  })();
-
-  return (
-    <div className={['text-xs font-mono', className].filter(Boolean).join(' ')} style={style}>
-      <div className="flex items-baseline gap-2 max-w-full py-0.5">
-        <span className="text-[var(--zg-accent-hover)] font-medium select-none">!</span>
-        <span className={`truncate ${lineState === 'running' ? 'zg-shimmer' : 'text-[var(--zg-text)]'}`}>
-          {row.command}
-        </span>
-        {/* running → exit/failed swaps cross-fade in the same slot. */}
-        <Crossfade activeKey={row.running ? 'running' : row.errored ? 'failed' : row.exit === null ? 'none' : 'exit'}>
-          {badge}
-        </Crossfade>
-      </div>
-      {display !== null && <pre className={`${CODE_PANEL} mt-1 leading-relaxed`}>{display}</pre>}
-    </div>
-  );
-});

package/src/chat/useChatLabels.ts

@@ -1,14 +0,0 @@
-/**
- * The chat layer's labels: the design system's dictionary plus the chat
- * keys, overridable through the same `<LabelsProvider>`.
- */
-import { useMemo } from 'react';
-
-import { useLabels } from '../labels';
-import { DEFAULT_CHAT_LABELS, type ChatLabels } from './headless/labels';
-
-/** Returns the chat UI strings: the defaults merged with any overrides given to {@link ChatProvider} or `LabelsProvider`. */
-export function useChatLabels(): ChatLabels {
-  const overrides = useLabels() as Partial<ChatLabels>;
-  return useMemo(() => ({ ...DEFAULT_CHAT_LABELS, ...overrides }), [overrides]);
-}

package/src/code/CodeHighlightProvider.tsx

@@ -1,87 +0,0 @@
-/**
- * Which highlighter and which shiki theme the code blocks below use.
- *
- * Without a provider, blocks highlight on the main thread and follow the
- * document's appearance (the `.light` class on <html>, else dark) with the
- * neutral GitHub themes, as the site's own code does. An app passes its
- * worker-backed highlighter (`createCodeHighlighter({ createWorker })`) and,
- * to follow its own theme, the shiki theme for it (`shikiThemeFor`).
- */
-import { createContext, useContext, useMemo, useSyncExternalStore, type ReactNode } from 'react';
-
-import type { Appearance } from '../theme/derive';
-import { createCodeHighlighter, type CodeHighlighter } from './highlighter';
-import { defaultShikiTheme } from './shiki-theme';
-
-interface CodeHighlightValue {
-  highlighter: CodeHighlighter;
-  theme?: string;
-}
-
-const CodeHighlightContext = createContext<CodeHighlightValue>({ highlighter: createCodeHighlighter() });
-
-/** Props of {@link CodeHighlightProvider}. */
-export interface CodeHighlightProviderProps {
-  /** The highlighter (its cache and worker). Default: the enclosing one, or a main-thread highlighter. */
-  highlighter?: CodeHighlighter;
-  /** A bundled shiki theme id. Default: the enclosing one, or the document's appearance's GitHub theme. */
-  theme?: string;
-  /** The code blocks that read it. */
-  children: ReactNode;
-}
-
-/**
- * Sets the highlighter and the shiki theme of every code block below.
- *
- * @param props - The {@link CodeHighlightProviderProps}.
- */
-export function CodeHighlightProvider({ highlighter, theme, children }: CodeHighlightProviderProps) {
-  const parent = useContext(CodeHighlightContext);
-  const resolvedHighlighter = highlighter ?? parent.highlighter;
-  const resolvedTheme = theme ?? parent.theme;
-  const value = useMemo(
-    () => ({ highlighter: resolvedHighlighter, ...(resolvedTheme ? { theme: resolvedTheme } : {}) }),
-    [resolvedHighlighter, resolvedTheme],
-  );
-  return <CodeHighlightContext.Provider value={value}>{children}</CodeHighlightContext.Provider>;
-}
-
-const listeners = new Set<() => void>();
-let observer: MutationObserver | null = null;
-
-function subscribeAppearance(listener: () => void): () => void {
-  listeners.add(listener);
-  if (!observer && typeof MutationObserver !== 'undefined') {
-    observer = new MutationObserver(() => listeners.forEach((l) => l()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-  }
-  return () => {
-    listeners.delete(listener);
-    if (listeners.size === 0) {
-      observer?.disconnect();
-      observer = null;
-    }
-  };
-}
-
-const noSubscription = () => () => {};
-const documentAppearance = (): Appearance => (document.documentElement.classList.contains('light') ? 'light' : 'dark');
-// Server rendering and hydration: no block highlights before hydration, so any value is fine.
-const serverAppearance = (): Appearance => 'dark';
-
-/**
- * The document's appearance: the `.light` class on <html>, else dark.
- *
- * @param watch - Follow class changes. Off when the caller has its own theme and only needs a value.
- */
-export function useDocumentAppearance(watch = true): Appearance {
-  return useSyncExternalStore(watch ? subscribeAppearance : noSubscription, documentAppearance, serverAppearance);
-}
-
-/** Returns the highlighter and the shiki theme in effect for a code block. */
-export function useCodeHighlight(): { highlighter: CodeHighlighter; theme: string } {
-  const { highlighter, theme } = useContext(CodeHighlightContext);
-  // Only blocks without a theme from a provider watch the document's class.
-  const appearance = useDocumentAppearance(!theme);
-  return { highlighter, theme: theme ?? defaultShikiTheme(appearance) };
-}

package/src/code/HighlightedCode.tsx

@@ -1,150 +0,0 @@
-/**
- * A shiki-highlighted code block in the design system's code frame: the
- * transcript's fenced blocks, tool inputs and files read.
- *
- * Viewport-gated highlighting. `content-visibility: auto` on timeline rows
- * skips offscreen layout and paint, but React still mounts every block:
- * highlighting waits until the block nears the viewport, and runs in the
- * highlighter's worker when it has one. The plain <pre> fallback has the
- * highlighted block's tone and metrics, so the swap never flashes. Server
- * rendering and hydration draw the plain <pre> too: highlighting starts in
- * an effect, so the markup the client hydrates is the markup the server sent.
- * While a block near the viewport waits for its tokens, its <pre> carries
- * `data-zg-highlight="pending"`: tests and screenshots wait on it.
- */
-import { useEffect, useRef, useState, useSyncExternalStore, type CSSProperties } from 'react';
-
-import { CodeFrame } from '../components/CodeFrame';
-import { useNearViewport } from '../hooks/useNearViewport';
-import { useCodeHighlight } from './CodeHighlightProvider';
-
-/** Props of {@link HighlightedCode}. */
-export interface HighlightedCodeProps {
-  /** The code to show, without the closing newline. */
-  code: string;
-  /** A shiki language id (`plaintext` when the code names none). */
-  language: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Highlighted code with a copy button, plain until it nears the viewport. The highlighter and
- * theme come from the enclosing `CodeHighlightProvider`.
- *
- * @param props - The {@link HighlightedCodeProps}.
- */
-export function HighlightedCode({ code, language, className, style }: HighlightedCodeProps) {
-  const hostRef = useRef<HTMLDivElement | null>(null);
-  const near = useNearViewport(hostRef);
-  const html = useShikiHtml(code, language, near);
-  const pending = near && html === undefined;
-
-  return (
-    <CodeFrame
-      ref={hostRef}
-      code={code}
-      className={['zg-shiki my-2 text-xs', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {html ? (
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-      ) : (
-        // The highlighted block's metrics, on the frame's tone as it is (no background of its own,
-        // which would cover the frame's hairline): highlighting lands without a flash.
-        <pre
-          data-zg-highlight={pending ? 'pending' : undefined}
-          className="px-3 py-2 m-0 whitespace-pre font-mono text-[length:var(--zg-font-size-code)] leading-[1.5] text-[var(--zg-code-fg)]"
-        >
-          {code}
-        </pre>
-      )}
-    </CodeFrame>
-  );
-}
-
-const noSubscription = () => () => {};
-
-/** False while hydrating server markup, true on any client render after. */
-function useHydrated(): boolean {
-  return useSyncExternalStore(
-    noSubscription,
-    () => true,
-    () => false,
-  );
-}
-
-/**
- * Trailing debounce for re-highlights. A streaming fenced code block
- * changes `code` on every drain tick (about 60 a second). Highlighting each
- * change would queue stale tokenization work that competes with the stream
- * for the main thread. The first run highlights at once (opening a session
- * paints colored code without a delay). Only later changes wait. The plain
- * `<pre>` fallback shows the raw text meanwhile, so streaming does not look
- * stalled: HTML paints only for the code and language it was made from.
- */
-const REHIGHLIGHT_DEBOUNCE_MS = 150;
-
-/** Highlighted HTML and what it was made from. */
-interface Painted {
-  code: string;
-  language: string;
-  html: string | null;
-}
-
-/** The block's HTML: `null` when its language colors nothing, `undefined` until it is highlighted. */
-function useShikiHtml(code: string, language: string, enabled: boolean): string | null | undefined {
-  const { highlighter, theme } = useCodeHighlight();
-  const hydrated = useHydrated();
-  const [painted, setPainted] = useState<Painted | null>(null);
-  const firstRunRef = useState(() => ({ done: false }))[0];
-
-  useEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
-
-    const cached = highlighter.cached(code, language, theme);
-    if (cached !== undefined) {
-      firstRunRef.done = true;
-      setPainted({ code, language, html: cached });
-      return undefined;
-    }
-
-    let cancelled = false;
-
-    const run = () => {
-      void highlighter.highlight(code, language, theme).then((html) => {
-        if (!cancelled) {
-          setPainted({ code, language, html });
-        }
-      });
-    };
-
-    if (!firstRunRef.done) {
-      firstRunRef.done = true;
-      run();
-      return () => {
-        cancelled = true;
-      };
-    }
-
-    const timer = window.setTimeout(run, REHIGHLIGHT_DEBOUNCE_MS);
-
-    return () => {
-      cancelled = true;
-      window.clearTimeout(timer);
-    };
-  }, [code, language, theme, highlighter, firstRunRef, enabled]);
-
-  /*
-   * The theme is left out of the match: a theme switch keeps the old colors
-   * until the new ones land instead of flashing plain. A newer `code` paints
-   * plain (or its cached HTML: a block scrolled back to, remounted) until
-   * highlighted, never an older prefix's HTML.
-   */
-  if (painted && painted.code === code && painted.language === language) return painted.html;
-  return hydrated ? highlighter.cached(code, language, theme) : undefined;
-}

package/src/code/code-themes.ts

@@ -1,34 +0,0 @@
-/**
- * The bundled shiki themes by appearance: what a code-theme picker lists and
- * what checks a stored pick. Reads shiki's theme index only (`shiki/themes`),
- * never a theme or the highlighter.
- */
-import { bundledThemesInfo, type BundledTheme } from 'shiki/themes';
-
-import type { Appearance } from '../theme/derive';
-
-const TYPES: ReadonlyMap<string, Appearance> = new Map(
-  bundledThemesInfo.map((t) => [t.id, t.type === 'light' ? 'light' : 'dark']),
-);
-
-/**
- * The appearance a bundled shiki theme is made for.
- *
- * @param id - A shiki theme id, such as `nord`.
- * @returns `'light'` or `'dark'`, or `undefined` when `id` is not a bundled theme.
- */
-export function codeThemeTypeOf(id: string): Appearance | undefined {
-  return TYPES.get(id);
-}
-
-/**
- * The bundled shiki themes of one appearance, sorted by display name.
- *
- * @param type - `'light'` or `'dark'`.
- */
-export function codeThemesOf(type: Appearance): { id: BundledTheme; name: string }[] {
-  return bundledThemesInfo
-    .filter((t) => t.type === type)
-    .map((t) => ({ id: t.id as BundledTheme, name: t.displayName }))
-    .sort((a, b) => a.name.localeCompare(b.name));
-}