zidane-ui 9.0.4 → 9.1.3

package/src/code/editor/CodeHover.tsx

@@ -1,428 +0,0 @@
-/**
- * Code hover: a small card anchored under the hovered token. One surface
- * for everything the position has to say: the diagnostics covering it
- * (shown at once) and the language server's answer (appended when it
- * lands). pierre's own marker popover is hidden in `pierre-theme.ts` so
- * the two never stack.
- *
- * Fast path by design:
- *   - the request goes out after a short prefetch delay (120ms) so sweeping
- *     across code costs little, and the card shows as soon as the answer
- *     arrives but never before `SHOW_MIN_MS` (no flicker);
- *   - results are cached per (position, document text) so re-hovering the
- *     same symbol is instant;
- *   - a server still loading the project says so (`busy`): the card shows
- *     that instead of nothing, and asks again while the pointer stays, so
- *     the answer replaces it once the server is ready;
- *   - the content is rendered by `HoverContent`, a tiny fenced-code/inline
- *     markdown renderer, not the chat's react-markdown + shiki pipeline.
- */
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { type BundledLanguage, bundledLanguages } from 'shiki';
-
-import { readMenuExitMs, usePresence } from '../../motion/presence';
-import { useCodeHighlight } from '../CodeHighlightProvider';
-import type { CodeHighlighter } from '../highlighter';
-import { DIAGNOSTIC_GLYPH, type EditorDiagnostic } from './diagnostics';
-import type { CodeToken } from './FileView';
-
-const PREFETCH_MS = 120;
-const SHOW_MIN_MS = 220;
-const CACHE_MAX = 300;
-/** Servers answer differently while warming up (aliases unresolved); entries expire so a stale answer self-heals. */
-const CACHE_TTL_MS = 10_000;
-/** While the server is busy, ask again this often (as long as the pointer stays), up to `BUSY_RETRIES` times. */
-const BUSY_RETRY_MS = 1_500;
-const BUSY_RETRIES = 80;
-/** A server that just finished loading can answer empty for a beat: asked this many more times before the card goes. */
-const SETTLE_RETRIES = 3;
-const NO_ACTIONS: readonly HoverAction[] = [];
-
-/** What a hover fetch answers: the markdown, and why it is missing when the server is still loading. */
-export interface HoverAnswer {
-  /** The hover's markdown; `null`: nothing to show. */
-  text: string | null;
-  /** The server is still loading ("rust-analyzer: Indexing 12/340"). */
-  busy?: string;
-}
-
-/** A link at the foot of the hover card. */
-export interface HoverAction {
-  /** The link's text. */
-  label: string;
-  /** Runs with the hovered 1-based (line, column) after the card closes. */
-  run: (line: number, column: number) => void | Promise<unknown>;
-}
-
-interface Card {
-  text: string | null;
-  busy?: string;
-  notes: EditorDiagnostic[];
-  rect: DOMRect;
-  line: number;
-  column: number;
-}
-
-/**
- * Drives the hover card for a code view: wire `onEnter` / `onLeave` to the view's token
- * events and render `node` (a portal) anywhere.
- *
- * @param fetch - The answer for the symbol at a 1-based (line, column); `null` here: findings only.
- */
-export function useHoverCard(
-  fetch: ((line: number, column: number) => Promise<HoverAnswer>) | null,
-  /** Links at the card's foot (go to definition, find references). */
-  actions: readonly HoverAction[] = NO_ACTIONS,
-  /** Changes whenever the document text changes; invalidates the cache. */
-  docVersion: unknown = null,
-  /** Findings to show for the hovered position, ahead of the server's answer. */
-  notesAt?: (line: number, column: number) => EditorDiagnostic[],
-) {
-  const [card, setCard] = useState<Card | null>(null);
-  const seq = useRef(0);
-  const timers = useRef(new Set<ReturnType<typeof setTimeout>>());
-  const cache = useRef(new Map<string, { text: string; at: number }>());
-  const cacheVersion = useRef<unknown>(docVersion);
-  useLayoutEffect(() => {
-    if (cacheVersion.current === docVersion) return;
-    cacheVersion.current = docVersion;
-    cache.current.clear();
-  }, [docVersion]);
-
-  const clear = () => {
-    for (const id of timers.current) clearTimeout(id);
-    timers.current.clear();
-    seq.current++;
-    setCard(null);
-  };
-  const later = (ms: number, fn: () => void) => {
-    const id = setTimeout(() => {
-      timers.current.delete(id);
-      fn();
-    }, ms);
-    timers.current.add(id);
-  };
-
-  const onEnter = (t: CodeToken, _e: PointerEvent) => {
-    clear();
-    const mine = ++seq.current;
-    // Measure now: pierre may re-render the line (detaching the element) before the fetch returns.
-    // The card anchors under the hovered word, not the whole highlighter span.
-    const rect = wordRect(t);
-    const column = t.column;
-    const notes = notesAt?.(t.lineNumber, column) ?? [];
-    if (!fetch && notes.length === 0) return;
-    const key = `${t.lineNumber}:${column}`;
-    const started = performance.now();
-    const show = (text: string | null, busy?: string) => {
-      if (mine !== seq.current || (!text && !busy && notes.length === 0)) return;
-      const wait = Math.max(0, SHOW_MIN_MS - (performance.now() - started));
-      later(wait, () => {
-        if (mine === seq.current) setCard({ text, ...(busy ? { busy } : {}), notes, rect, line: t.lineNumber, column });
-      });
-    };
-    if (!fetch) {
-      show(null);
-      return;
-    }
-    const hit = cache.current.get(key);
-    if (hit && performance.now() - hit.at < CACHE_TTL_MS) {
-      show(hit.text);
-      return;
-    }
-    // Findings first; the server's answer joins the same card when it lands.
-    if (notes.length > 0) show(null);
-    // An answer for text that changed meanwhile must not seed the new text's cache.
-    const version = cacheVersion.current;
-    /** `settle`: asks left after the server stopped being busy (0 on the first ask). */
-    const ask = (tries: number, settle: number) => {
-      fetch(t.lineNumber, column)
-        .catch((): HoverAnswer => ({ text: null }))
-        .then(({ text, busy }) => {
-          if (mine !== seq.current) return;
-          if (text && cacheVersion.current === version) {
-            if (cache.current.size >= CACHE_MAX) cache.current.clear();
-            cache.current.set(key, { text, at: performance.now() });
-          }
-          if (text || busy) {
-            show(text, text ? undefined : busy);
-            if (!text && tries < BUSY_RETRIES) later(BUSY_RETRY_MS, () => ask(tries + 1, SETTLE_RETRIES));
-            return;
-          }
-          if (settle > 0) {
-            later(BUSY_RETRY_MS, () => ask(tries + 1, settle - 1));
-            return;
-          }
-          // Nothing to say after all: the findings alone, or no card (never a stale loading line).
-          if (notes.length > 0) show(null);
-          else setCard(null);
-        });
-    };
-    later(PREFETCH_MS, () => ask(0, 0));
-  };
-
-  useEffect(() => () => clear(), []); // unmount only
-
-  // The last card stays mounted through its close (`menu-exit`); a new one replaces it.
-  const [lastCard, setLastCard] = useState<Card | null>(null);
-  if (card && card !== lastCard) setLastCard(card);
-  const { mounted } = usePresence(card !== null, { exitMs: readMenuExitMs });
-  const shown = mounted ? (card ?? lastCard) : null;
-  const node = shown ? <HoverCardView card={shown} open={card !== null} actions={actions} onAction={clear} /> : null;
-
-  return { onEnter, onLeave: clear, node };
-}
-
-/** Screen box of the hovered identifier; falls back to the span when the text node is unavailable. */
-function wordRect(t: CodeToken): DOMRect {
-  const node = t.element.firstChild;
-  if (node && node.nodeType === Node.TEXT_NODE && (node.textContent?.length ?? 0) >= t.word.end) {
-    const range = document.createRange();
-    range.setStart(node, t.word.start);
-    range.setEnd(node, t.word.end);
-    const rect = range.getBoundingClientRect();
-    if (rect.width > 0) return rect;
-  }
-  return t.element.getBoundingClientRect();
-}
-
-function HoverCardView({
-  card,
-  open,
-  actions,
-  onAction,
-}: {
-  card: Card;
-  open: boolean;
-  actions: readonly HoverAction[];
-  onAction: () => void;
-}) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [pos, setPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
-  // Place with the card's real size: below the token, flipped above when it would not fit.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const { width, height } = el.getBoundingClientRect();
-    const margin = 8;
-    const left = Math.max(margin, Math.min(card.rect.left, window.innerWidth - width - margin));
-    const below = card.rect.bottom + 4;
-    if (below + height <= window.innerHeight - margin) setPos({ left, top: below });
-    else setPos({ left, bottom: window.innerHeight - card.rect.top + 4 });
-  }, [card]);
-  const sections = useMemo(() => (card.text ? renderHover(card.text) : []), [card.text]);
-  return createPortal(
-    <div
-      role="tooltip"
-      ref={ref}
-      // The shared menu motion, growing out of the token's side (below, or above when flipped).
-      data-state={open ? 'open' : 'closed'}
-      data-side={pos?.bottom !== undefined ? 'top' : 'bottom'}
-      className={`zg-float zg-menu-motion zg-hover-card fixed z-30 max-w-[36rem] max-h-64 overflow-auto text-zg-label leading-[18px] ${pos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`}
-      style={pos ?? { left: card.rect.left, top: card.rect.bottom + 4, visibility: 'hidden' }}
-    >
-      {card.notes.length > 0 && (
-        <ul className="zg-hover-section m-0 list-none flex flex-col gap-0.5">
-          {card.notes.map((d, i) => (
-            <li key={i} className="flex items-start gap-1.5">
-              <span
-                className={`${DIAGNOSTIC_GLYPH[d.severity].icon} ${DIAGNOSTIC_GLYPH[d.severity].tone} shrink-0 mt-[3px] text-zg-label`}
-                aria-hidden
-              />
-              <span className="min-w-0 whitespace-pre-wrap break-words">
-                {d.message}
-                <span className="zg-meta ml-1.5">{d.code ? `${d.source}(${d.code})` : d.source}</span>
-              </span>
-            </li>
-          ))}
-        </ul>
-      )}
-      {card.busy && !card.text && (
-        <div role="status" className="zg-hover-section flex items-center gap-1.5 text-[var(--zg-text-muted)]">
-          <span className="i-ph-circle-notch animate-spin text-zg-label shrink-0" aria-hidden />
-          <span className="min-w-0 truncate">{card.busy}</span>
-        </div>
-      )}
-      {sections.map((section, i) => (
-        <div key={i} className="zg-hover-section">
-          {section}
-        </div>
-      ))}
-      {actions.length > 0 && (
-        // One action reads as a link; several sit in a row.
-        <div className={actions.length > 1 ? 'zg-hover-section flex flex-wrap gap-x-3' : 'zg-hover-section'}>
-          {actions.map((action) => (
-            <button
-              key={action.label}
-              type="button"
-              onClick={() => {
-                onAction();
-                void action.run(card.line, card.column);
-              }}
-              className="bg-transparent border-0 p-0 cursor-pointer text-zg-meta leading-4 text-[var(--zg-text-muted)] hover:text-[var(--zg-accent)]"
-            >
-              {action.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>,
-    document.body,
-  );
-}
-
-/** Highlighted hover code: cached per (theme, language, text); the first paint is plain and swaps in place. */
-const tokenCache = new Map<string, HoverToken[][]>();
-const TOKEN_CACHE_MAX = 200;
-type HoverToken = { content: string; color?: string };
-
-function hoverLanguage(fence: string): BundledLanguage | null {
-  const lang = fence.trim().toLowerCase();
-  return lang && lang in bundledLanguages ? (lang as BundledLanguage) : null;
-}
-
-async function highlightHover(
-  highlighter: CodeHighlighter,
-  code: string,
-  lang: BundledLanguage,
-  theme: string,
-): Promise<HoverToken[][]> {
-  const key = `${theme}\0${lang}\0${code}`;
-  const hit = tokenCache.get(key);
-  if (hit) return hit;
-  // Tokenised in the transcript's shiki worker; only the (small) HTML is walked here.
-  const html = await highlighter.highlight(code, lang, theme);
-  if (html === null) throw new Error('highlight failed');
-  const out = tokensFromShikiHtml(html);
-  if (tokenCache.size >= TOKEN_CACHE_MAX) tokenCache.clear();
-  tokenCache.set(key, out);
-  return out;
-}
-
-/**
- * shiki's `<pre><code><span class="line"><span style="color:…">…` back into lines of colored runs.
- *
- * @param html - shiki's `codeToHtml` output.
- */
-export function tokensFromShikiHtml(html: string): HoverToken[][] {
-  const tpl = document.createElement('template');
-  tpl.innerHTML = html;
-  const lines = tpl.content.querySelectorAll<HTMLElement>('.line');
-  return [...lines].map((line) =>
-    [...line.childNodes].map((node) => {
-      const content = node.textContent ?? '';
-      const color = node instanceof HTMLElement ? node.style.color : '';
-      return color ? { content, color } : { content };
-    }),
-  );
-}
-
-/** Props for {@link HoverCode}. */
-export interface HoverCodeProps {
-  /** The block's text. */
-  code: string;
-  /** The fence's language id; unknown ones stay plain. */
-  lang: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A hover's code block: plain text at once, recolored in place once the highlighter answers.
- *
- * @param props - `code`: the block's text; `lang`: its fence language.
- */
-export function HoverCode({ code, lang, className, style }: HoverCodeProps) {
-  const { highlighter, theme } = useCodeHighlight();
-  const language = hoverLanguage(lang);
-  const key = language ? `${theme}\0${language}\0${code}` : null;
-  // Tagged with the text they paint: a card reused for another symbol never shows the previous one's tokens.
-  const [highlighted, setHighlighted] = useState<{ key: string; tokens: HoverToken[][] } | null>(null);
-  const tokens = key ? (highlighted?.key === key ? highlighted.tokens : (tokenCache.get(key) ?? null)) : null;
-  useEffect(() => {
-    if (!language || !key) return;
-    let live = true;
-    highlightHover(highlighter, code, language, theme)
-      .then((t) => {
-        if (live) setHighlighted({ key, tokens: t });
-      })
-      .catch(() => {
-        // Unknown grammar or load failure: the plain text stands.
-      });
-    return () => {
-      live = false;
-    };
-  }, [highlighter, code, language, theme, key]);
-  return (
-    <pre className={['zg-hover-code', className].filter(Boolean).join(' ')} style={style}>
-      {tokens
-        ? tokens.map((line, i) => (
-            <span key={i} className="block">
-              {line.map((t, j) =>
-                t.color ? (
-                  <span key={j} style={{ color: t.color }}>
-                    {t.content}
-                  </span>
-                ) : (
-                  t.content
-                ),
-              )}
-            </span>
-          ))
-        : code}
-    </pre>
-  );
-}
-
-/**
- * Minimal markdown for LSP hovers, one node per section: fenced code blocks
- * become `HoverCode` (plain first, highlighted in place), other lines are
- * paragraphs with `code`, **bold** and *italic* spans. No remark: a hover
- * must paint in one frame.
- *
- * @param markdown - The hover text a language server returned.
- */
-export function renderHover(markdown: string): ReactNode[] {
-  const out: ReactNode[] = [];
-  const lines = markdown.split('\n');
-  let i = 0;
-  let key = 0;
-  while (i < lines.length) {
-    const fence = /^```(\S*)/.exec(lines[i]);
-    if (fence) {
-      const code: string[] = [];
-      i++;
-      while (i < lines.length && !/^```/.test(lines[i])) code.push(lines[i++]);
-      i++;
-      out.push(<HoverCode key={key++} code={code.join('\n')} lang={fence[1]} />);
-      continue;
-    }
-    const para: string[] = [];
-    while (i < lines.length && !/^```/.test(lines[i]) && lines[i].trim() !== '') para.push(lines[i++]);
-    if (para.length) {
-      out.push(
-        <p key={key++} className="m-0">
-          {inline(para.join(' '))}
-        </p>,
-      );
-    } else {
-      i++;
-    }
-  }
-  return out;
-}
-
-const INLINE = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|_[^_]+_)/g;
-
-function inline(text: string): ReactNode[] {
-  return text.split(INLINE).map((part, idx) => {
-    if (part.startsWith('`')) return <code key={idx}>{part.slice(1, -1)}</code>;
-    if (part.startsWith('**')) return <strong key={idx}>{part.slice(2, -2)}</strong>;
-    if ((part.startsWith('*') || part.startsWith('_')) && part.length > 2)
-      return <em key={idx}>{part.slice(1, -1)}</em>;
-    return part;
-  });
-}

package/src/code/editor/DiagnosticAnnotation.tsx

@@ -1,73 +0,0 @@
-/**
- * Line annotation listing the findings on one line: severity glyph, source
- * and code, message, and (with `onAddToChat`) an "Add to chat" that ships
- * the finding with the line it points at.
- */
-import type { CSSProperties } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { Tooltip } from '../../components/Tooltip';
-import { useLabels } from '../../labels';
-import { DIAGNOSTIC_GLYPH, type EditorDiagnostic } from './diagnostics';
-
-/** Props for {@link DiagnosticAnnotation}. */
-export interface DiagnosticAnnotationProps<D extends EditorDiagnostic> {
-  /** The findings on this line, in display order. */
-  items: readonly D[];
-  /** Called with a finding when its "Add to chat" button is pressed. The button is hidden without it. */
-  onAddToChat?: (d: D) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Lists the findings on one line under that line, each with its glyph, message, source and code.
- *
- * @param props - `items`: the line's findings; `onAddToChat`: shows a per-finding "Add to chat" button.
- */
-export function DiagnosticAnnotation<D extends EditorDiagnostic>({
-  items,
-  onAddToChat,
-  className,
-  style,
-}: DiagnosticAnnotationProps<D>) {
-  const labels = useLabels();
-  return (
-    <ul
-      className={[
-        'm-0 p-0 list-none flex flex-col gap-1 px-3 py-1.5 border-s-2 border-[var(--zg-border-strong)] bg-[var(--zg-tray)] font-sans',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {items.map((d, i) => {
-        const g = DIAGNOSTIC_GLYPH[d.severity];
-        return (
-          <li key={i} className="group flex items-start gap-2 text-zg-meta leading-4">
-            <span className={`${g.icon} ${g.tone} text-zg-label shrink-0 mt-px`} aria-hidden />
-            <span className="min-w-0 flex-1 text-[var(--zg-text)] whitespace-pre-wrap break-words">
-              {d.message}
-              <span className="zg-meta ml-1.5">{d.code ? `${d.source}(${d.code})` : d.source}</span>
-            </span>
-            {onAddToChat && (
-              <Tooltip label={labels.addToChat} portal>
-                <IconButton
-                  size="xs"
-                  icon="i-ph-chat-teardrop-text"
-                  label={labels.addDiagnosticToChat(d.message)}
-                  title=""
-                  onClick={() => onAddToChat(d)}
-                  className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-                />
-              </Tooltip>
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

package/src/code/editor/DiagnosticsChip.tsx

@@ -1,85 +0,0 @@
-/**
- * Header chip for a file's diagnostics: a spinner while checking, a check
- * when clean, counts by severity otherwise. The owner words the tooltip
- * (which tools ran, what failed) and decides what a click does.
- */
-import type { CSSProperties } from 'react';
-
-import { Tooltip } from '../../components/Tooltip';
-import { countBySeverity, type EditorDiagnostic } from './diagnostics';
-
-/**
- * `running`: a check is under way. `checked`: something checked the file
- * (counts, or a check mark when clean). `idle`: nothing checks this file.
- * `failed`: every check failed.
- */
-export type DiagnosticsChipState = 'running' | 'checked' | 'idle' | 'failed';
-
-/** Props for {@link DiagnosticsChip}. */
-export interface DiagnosticsChipProps {
-  /** Where checking stands. Counts show only while `checked`. */
-  state: DiagnosticsChipState;
-  /** The file's findings, counted by severity. */
-  items: readonly EditorDiagnostic[];
-  /** The tooltip and the accessible name. */
-  label: string;
-  /** Called when the chip is pressed, for example to open the findings. */
-  onClick?: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Shows a file's check state in its header: a spinner, a check mark, counts by severity, or a
- * dashed or warning circle when nothing checks the file or every check failed.
- *
- * @param props - `state` and `items` pick what the chip shows; `label` is its tooltip; `onClick` its action.
- */
-export function DiagnosticsChip({ state, items, label, onClick, className, style }: DiagnosticsChipProps) {
-  const counts = countBySeverity(items);
-  const clean = state === 'checked' && counts.errors + counts.warnings + counts.other === 0;
-  return (
-    <Tooltip label={label} portal className={className} style={style}>
-      <button
-        type="button"
-        onClick={onClick}
-        aria-label={label}
-        className="zg-segment-item zg-press-soft zg-meta inline-flex items-center gap-1.5 h-5 px-1.5 rounded-full border-0 bg-transparent cursor-pointer shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]"
-      >
-        {state === 'running' ? (
-          <span className="i-ph-circle-notch animate-spin text-zg-label" aria-hidden />
-        ) : clean ? (
-          <span className="i-ph-check-circle-fill text-zg-label text-zg-success" aria-hidden />
-        ) : state !== 'checked' ? (
-          <span
-            className={`${state === 'failed' ? 'i-ph-warning-circle text-zg-warn' : 'i-ph-circle-dashed'} text-zg-label`}
-            aria-hidden
-          />
-        ) : (
-          <>
-            {counts.errors > 0 && (
-              <span className="inline-flex items-center gap-0.5 text-zg-danger">
-                <span className="i-ph-x-circle-fill text-zg-label" aria-hidden />
-                {counts.errors}
-              </span>
-            )}
-            {counts.warnings > 0 && (
-              <span className="inline-flex items-center gap-0.5 text-zg-warn">
-                <span className="i-ph-warning text-zg-label" aria-hidden />
-                {counts.warnings}
-              </span>
-            )}
-            {counts.other > 0 && (
-              <span className="inline-flex items-center gap-0.5 text-zg-info">
-                <span className="i-ph-info text-zg-label" aria-hidden />
-                {counts.other}
-              </span>
-            )}
-          </>
-        )}
-      </button>
-    </Tooltip>
-  );
-}