zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/frame.tsx

@@ -1,326 +0,0 @@
-import { createContext, memo, useContext } from 'react';
-import { Crossfade, Presence } from '../../motion/swap';
-import type { DotVariant } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-
-/*
- * Measured alignment (getBoundingClientRect on the built app): the
- * transcript has exactly ONE glyph column. Rows sit inside the container's
- * pl-2 (8px) and lead with a 16px Dot, so EVERY row glyph centers at
- * x = 8 + 8 = 16 container-relative, and text starts at
- * 8 + 16 + 12 (gap-3) = 36. No line joins the glyphs: the column of
- * quiet rings is the structure.
- *
- * Every disclosure reads the same way: the status Dot in the gutter, the
- * label, then a trailing `Caret`. No header puts its caret in the gutter
- * (the SubagentBlock header and a command's detail row lead with a Dot
- * too). The SubagentBlock is a plain in-flow collapsible (no card chrome,
- * no horizontal padding), so its inner rows render through the exact same
- * row markup as main-thread rows and land on x=16 by construction.
- *
- * Without row icons (`RowIconsContext`, the `showRowIcons` option) the
- * column goes: each `Dot` renders nothing, a row's text starts at x = 8,
- * and the state only an icon showed moves into the row's line (`LineState`).
- */
-/** Horizontal distance in pixels from one nesting level of the transcript's glyph column to the next: a 16px glyph slot plus a 12px gap. */
-export const GUTTER_STEP_PX = 28; // 16px glyph slot + 12px gap-3
-
-/**
- * Whether the transcript draws its row icons: the {@link Dot} that leads
- * each row (you, the agent, how a step went). `Transcript` provides it from
- * its `showRowIcons` option. Without them the icon column goes and the rows
- * take its room.
- */
-export const RowIconsContext = createContext(true);
-
-/** Whether the rows of the transcript around draw their icons ({@link RowIconsContext}). */
-export function useRowIcons(): boolean {
-  return useContext(RowIconsContext);
-}
-
-/**
- * A step's state that only its row icon shows: a call or a worker still
- * running, or one that failed. Without the icons the row's own line says it:
- * a light sweep over its name while it runs, a {@link FailedMark} once it failed.
- */
-export type LineState = 'running' | 'failed';
-
-/**
- * The {@link LineState} a row icon stands for, or `undefined` when the row's
- * line says its state already (a reply, a note, an error in its own tone).
- *
- * @param variant - The row's icon.
- */
-export function lineStateOf(variant: DotVariant): LineState | undefined {
-  return variant === 'tool-running' ? 'running' : variant === 'tool-err' ? 'failed' : undefined;
-}
-
-/** Props for {@link FailedMark}. */
-export interface FailedMarkProps {
-  /**
-   * Hides the mark from assistive tech, for a row whose text says it failed already.
-   * @default false
-   */
-  decorative?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * A failed step's mark in its own line, in a transcript without row icons:
- * the red cross its icon would have shown.
- *
- * @param props - Mark props: `decorative` for a row that names its state in text already.
- */
-export function FailedMark({ decorative = false, className, style }: FailedMarkProps) {
-  const labels = useChatLabels();
-  return (
-    <span
-      data-testid="row-failed"
-      {...(decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': labels.stepFailed })}
-      title={labels.stepFailed}
-      className={['i-ph-x text-zg-meta text-zg-danger shrink-0 self-center', className].filter(Boolean).join(' ')}
-      style={style}
-    />
-  );
-}
-
-/** Props for {@link RowFrame}. */
-export interface RowFrameProps {
-  /** The row's dot and content. */
-  children: React.ReactNode;
-  /**
-   * Fades the row in on mount. Pass `false` when the row was already on screen in another form.
-   * @default true
-   */
-  enter?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * Lays out one transcript row: a flex line that holds the row's dot and its content.
- *
- * @param props - Frame props: the row's `children` and the `enter` animation switch.
- */
-export function RowFrame({ children, enter = true, className, style }: RowFrameProps) {
-  // `enter: false`: the row was already on screen in another form (a live
-  // message group handing its last message back), so it must not fade in.
-  return (
-    <div
-      className={[`${enter ? 'zg-row-enter ' : ''}relative flex items-start gap-3`, className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
-
-/*
- * Phantom-line height per variant — the dot is centered inside a span
- * matching the FIRST LINE of the adjacent content so the visual center
- * lands on the line midpoint, not on the line-box edge.
- *
- *   - 22.4px = `text-sm` (14px) × `.zg-md` line-height 1.6 → markdown +
- *     user-prompt bubble.
- *   - 20px   = `text-xs` (12px) at 16px line-height + the tool header
- *     button's `py-0.5` (4px total vertical padding) → tool variants,
- *     the thinking row and the SubagentBlock header (same button shape).
- *   - 26.4px = `text-sm` × 1.6 + `py-0.5` → a command's detail header
- *     (passed as `line`, see TranscriptRow). A command's note and a run's
- *     error / stop line read at plain `text-sm` × 1.6 = 22.4px.
- *   - 16px   = `text-xs` (12px) × Tailwind default leading 1.333 →
- *     info and spawn-* rows (no surrounding padding).
- *
- * Plain `1.6em` doesn't work because the Dot wrapper sits OUTSIDE the
- * content's font-size context — `em` resolves against the row's 16px
- * body inheritance, not against the content's `text-sm` / `text-xs`.
- */
-const DOT_LINE_HEIGHT: Record<DotVariant, string> = {
-  user: '22.4px',
-  text: '22.4px',
-  // Thinking rows lead with a py-0.5 header button, same as tools.
-  thinking: '20px',
-  'tool-running': '20px',
-  'tool-ok': '20px',
-  'tool-err': '20px',
-  info: '16px',
-  note: '22.4px',
-  error: '22.4px',
-  stopped: '22.4px',
-  'spawn-start': '16px',
-  'spawn-end': '16px',
-  // Compaction card (a tray, no border): `mt-1` (4px) + `py-1.5` (6px) above
-  // a 16px first line → center at 18px.
-  compact: '36px',
-  messages: '22.4px',
-  // Session-event rows carry their own py-1 (4px) above a 22.4px title line
-  // (text-sm × 1.6) → center at 15.2px.
-  'session-done': '30.4px',
-  'session-error': '30.4px',
-  'session-cancelled': '30.4px',
-  'session-needs-attention': '30.4px',
-};
-
-/*
- * Optical nudge for dots beside `text-xs` labels. Centering on the line box
- * is geometrically exact but reads high: a mostly-lowercase 12px label's
- * visual centre is its x-height middle, measured ~1.25px below the line
- * centre (the ring beside "Thinking" looked like it floated). `paddingTop:
- * 2px` on the border-box line span moves the centred dot down 1px.
- */
-const DOT_OPTICAL_NUDGE: ReadonlySet<DotVariant> = new Set<DotVariant>([
-  'thinking',
-  'tool-running',
-  'tool-ok',
-  'tool-err',
-  'info',
-  'spawn-start',
-  'spawn-end',
-]);
-
-/*
- * Every dot is the same quiet ring (no fill, the border tone), so the
- * glyph alone says what the row is. Tone lives in the glyph color only:
- * muted for work, accent for the conversation's two voices, the status
- * colors where a state has to read at a glance. Failure is always the one
- * danger tone (`--zg-danger`, `text-zg-danger` in markup); success is the
- * muted check, so a settled row recedes.
- */
-const muted = 'var(--zg-text-muted)';
-const danger = 'var(--zg-danger)';
-const DOT_GLYPH: Record<DotVariant, { icon: string; fg: string }> = {
-  user: { icon: 'i-ph-user', fg: 'var(--zg-accent)' },
-  text: { icon: 'i-ph-robot', fg: 'var(--zg-accent)' },
-  thinking: { icon: 'i-ph-lightbulb', fg: muted },
-  'tool-running': { icon: '', fg: muted },
-  'tool-ok': { icon: 'i-ph-check', fg: muted },
-  'tool-err': { icon: 'i-ph-x', fg: danger },
-  info: { icon: 'i-ph-info', fg: muted },
-  note: { icon: 'i-ph-check', fg: muted },
-  error: { icon: 'i-ph-warning', fg: danger },
-  stopped: { icon: 'i-ph-stop-fill', fg: muted },
-  'spawn-start': { icon: 'i-ph-git-fork', fg: muted },
-  'spawn-end': { icon: 'i-ph-check', fg: muted },
-  compact: { icon: 'i-ph-arrows-in', fg: muted },
-  messages: { icon: 'i-ph-chats-circle', fg: muted },
-  'session-done': { icon: 'i-ph-check', fg: 'var(--zg-accent-alt)' },
-  'session-error': { icon: 'i-ph-x', fg: danger },
-  'session-cancelled': { icon: 'i-ph-prohibit', fg: muted },
-  'session-needs-attention': { icon: 'i-ph-warning-circle', fg: 'var(--zg-warn)' },
-};
-
-const DOT_LINE_STYLE = Object.fromEntries(
-  (Object.keys(DOT_LINE_HEIGHT) as DotVariant[]).map((variant) => [
-    variant,
-    DOT_OPTICAL_NUDGE.has(variant)
-      ? { height: DOT_LINE_HEIGHT[variant], paddingTop: '2px' }
-      : { height: DOT_LINE_HEIGHT[variant] },
-  ]),
-) as Record<DotVariant, React.CSSProperties>;
-
-const DOT_RING_STYLE = Object.fromEntries(
-  (Object.keys(DOT_GLYPH) as DotVariant[]).map((variant) => [
-    variant,
-    { background: 'transparent', borderColor: 'var(--zg-border)', color: DOT_GLYPH[variant].fg },
-  ]),
-) as Record<DotVariant, React.CSSProperties>;
-
-const ORBIT_STYLE: React.CSSProperties = {
-  background: 'conic-gradient(from 0deg, var(--zg-accent) 0 30%, transparent 30% 100%)',
-  WebkitMaskImage: 'radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px))',
-  maskImage: 'radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px))',
-  animation: 'zg-orbit 1.1s linear infinite',
-};
-
-/** Props for {@link Caret}. */
-export interface CaretProps {
-  /** The header is expanded. Turns the caret down. */
-  open: boolean;
-  /** Extra class names, for example to show the caret only on hover. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * The disclosure caret of a collapsible header: points right, turns down while open.
- *
- * @param props - Caret props: `open` and an optional `className`.
- */
-export function Caret({ open, className = '', style }: CaretProps) {
-  return (
-    <span
-      aria-hidden
-      className={`zg-caret i-ph-caret-right text-zg-meta ${className}`}
-      style={style}
-      data-open={open || undefined}
-    />
-  );
-}
-
-/** Props for {@link Dot}. */
-export interface DotProps {
-  /** The row's kind and state: picks the glyph, its tone and the line height it centres on. */
-  variant: DotVariant;
-  /** The first text line's height it centres on, in place of the variant's (a CSS length). */
-  line?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * Renders the status dot that leads a transcript row, centered on the row's
- * first text line. Nothing in a transcript without row icons ({@link RowIconsContext}).
- */
-export const Dot = memo(function Dot({ variant, line, className, style }: DotProps) {
-  const icons = useRowIcons();
-  if (!icons) {
-    return null;
-  }
-  const icon = DOT_GLYPH[variant].icon;
-  const lineStyle = line !== undefined ? { height: line } : DOT_LINE_STYLE[variant];
-
-  /*
-   * Outer span = phantom line-box matching the variant's content line.
-   * `inline-flex items-center` centers the 16x16 dot vertically inside,
-   * so the dot's visual center lands on the first-line midpoint of the
-   * sibling text — alignment that holds regardless of `text-sm` vs
-   * `text-xs` row variants.
-   *
-   * Inner span = the actual visible dot. `relative` so the
-   * `tool-running` pulse positions to it (not the phantom line).
-   */
-  return (
-    <span
-      aria-hidden
-      data-row-icon={variant}
-      className={['relative z-10 inline-flex items-center shrink-0', className].filter(Boolean).join(' ')}
-      style={style ? { ...lineStyle, ...style } : lineStyle}
-    >
-      {/*
-       * The ring itself never changes (no fill, the border tone): on a
-       * variant change the glyph cross-fades (running → check is one
-       * motion) and the orbit arc dissolves via `Presence` instead of
-       * vanishing. The glyph is the gutter's one icon size, `text-zg-badge`.
-       */}
-      <span
-        className="relative flex items-center justify-center w-4 h-4 rounded-full border-2"
-        style={DOT_RING_STYLE[variant]}
-      >
-        <Crossfade activeKey={icon || 'none'}>{icon ? <span className={`${icon} text-zg-badge`} /> : null}</Crossfade>
-        <Presence show={variant === 'tool-running'} className="absolute -inset-[2px]">
-          <span aria-hidden className="zg-loop absolute inset-0 rounded-full" style={ORBIT_STYLE} />
-        </Presence>
-      </span>
-    </span>
-  );
-});

package/src/chat/transcript/index.ts

@@ -1,65 +0,0 @@
-/**
- * `zidane-ui/chat/transcript`: the transcript's row components, its renderer
- * slots (`TranscriptRenderersProvider`) and actions (`TranscriptActionsProvider`).
- * `Transcript` / `HostTranscript` themselves are in `zidane-ui/chat`.
- */
-export * from './actions';
-export * from './renderers';
-export * from './DiffLines';
-export * from './EditDiffBlock';
-export * from './fold';
-export * from './fold-worker';
-export * from './frame';
-export * from './ImageGenerationBlock';
-export * from './LazyRow';
-export * from './markdown';
-export * from './messages';
-export * from './notices';
-export * from './prompt';
-export * from './prompt-lines';
-export * from './prose';
-export * from './remark-refs';
-export * from './remark-references';
-export * from './references';
-export * from './chip-resolve';
-export * from './chip-details';
-export * from './BadgeMenu';
-export * from './site-icons';
-export * from './markdown-context';
-export * from './badges';
-export * from './ChipCard';
-export * from './CardMarkdown';
-export * from './ChipCards';
-export * from './ReferenceText';
-export * from './FileChip';
-export * from './ProseMarkdown';
-export * from './PromptEcho';
-export * from './InteractionToolBody';
-export * from './InlineChipText';
-export * from './EarlierHistory';
-export * from './useWheelHoverPause';
-export * from './useSettledReveal';
-export * from './useTranscriptScroll';
-export * from './useTranscriptSearch';
-export * from './TranscriptSearch';
-export * from './useComposerSearch';
-export * from './SelectTurnProvider';
-export * from './SelectTurnHint';
-export * from './useSelectTurnKeys';
-export * from './useTranscriptFindKey';
-export * from './useTranscriptFind';
-export * from './TurnMenu';
-export * from './turn-commands';
-export * from './run-rows';
-export * from './SelectCursor';
-export * from './SubagentBlock';
-export * from './tool-batch';
-export * from './tool-details';
-export * from './tool-media';
-export * from './tool-parts';
-export * from './tool-row';
-export * from './TranscriptRow';
-export * from './use-transcript-rows';
-export * from './user-bash';
-export * from './useStickToBottom';
-export * from './useTranscriptSelectionCopy';

package/src/chat/transcript/markdown-cache.ts

@@ -1,70 +0,0 @@
-/**
- * The transcript's markdown, parsed once per text. A conversation opened
- * again (a space switch reopening it, a click back to it) mounts every reply
- * anew, and each one re-ran remark, rehype and the JSX build: the largest
- * single cost of the switch's frame. The elements react-markdown returns are
- * plain descriptions (its components read context when they render), so the
- * same element renders in any mount.
- *
- * Least recently used first out, bounded by the total length of the texts held.
- */
-import type { ReactElement } from 'react';
-
-/** Text held, in characters, before the least recently used parse goes. */
-const MAX_CHARS = 1_500_000;
-
-const entries = new Map<string, { element: ReactElement; chars: number }>();
-let chars = 0;
-
-const ids = new WeakMap<object, number>();
-let nextId = 1;
-const idOf = (value: object | undefined) => {
-  if (!value) return 0;
-  let id = ids.get(value);
-  if (id === undefined) ids.set(value, (id = nextId++));
-  return id;
-};
-
-/** What a parse depends on besides its text: identities, so keep them stable (module constants, memoised lists). */
-export interface MarkdownParseKey {
-  /** A document rather than a reply (other components). */
-  document: boolean;
-  /** The remark plugins. */
-  plugins: object | undefined;
-  /** The URL rewrite. */
-  urlTransform: object | undefined;
-}
-
-/**
- * The parse of `text`, from the cache when it holds one.
- *
- * @param text - The markdown.
- * @param key - What else the parse depends on.
- * @param parse - Builds the elements on a miss.
- */
-export function cachedMarkdown(text: string, key: MarkdownParseKey, parse: () => ReactElement): ReactElement {
-  const id = `${key.document ? 'd' : 'r'}${idOf(key.plugins)}.${idOf(key.urlTransform)}:${text}`;
-  const hit = entries.get(id);
-  if (hit) {
-    entries.delete(id);
-    entries.set(id, hit);
-    return hit.element;
-  }
-  const element = parse();
-  // A text past the whole budget is parsed every time rather than flushing everything else.
-  if (text.length > MAX_CHARS) return element;
-  entries.set(id, { element, chars: text.length });
-  chars += text.length;
-  for (const [oldest, entry] of entries) {
-    if (chars <= MAX_CHARS) break;
-    entries.delete(oldest);
-    chars -= entry.chars;
-  }
-  return element;
-}
-
-/** Empties the cache (tests). */
-export function clearMarkdownCache(): void {
-  entries.clear();
-  chars = 0;
-}

package/src/chat/transcript/markdown-context.ts

@@ -1,52 +0,0 @@
-/**
- * What a session's prose chips resolve against, provided by the transcript's
- * container: the folder (relative file chips), the repo's web base (`#123`,
- * SHAs, branches), the server a server session's files are on, how a chip
- * opens its path, and the folder and host its `/` commands come from.
- */
-import { createContext } from 'react';
-
-/** How a file chip opens what it names. */
-export type ChipOpener = (
-  path: string,
-  kind: 'file' | 'dir',
-  event?: { metaKey?: boolean; ctrlKey?: boolean },
-) => Promise<boolean | void>;
-
-/**
- * Session-scoped facts prose chips need. `cwd` and `repoWebBase` are `null`
- * outside a session. `host`: the server a server session's files are on; its
- * file chips are inert (this machine's disk is not that server's), with a
- * tooltip saying so.
- */
-export interface MarkdownContextValue {
-  /** The session's folder. */
-  cwd: string | null;
-  /** The repo's web address (`https://github.com/o/r`). */
-  repoWebBase: string | null;
-  /** The server a server session's files are on. */
-  host?: string | null;
-  /** Opens a chip's path; resolves `false` when it couldn't (the chip dims), nothing when it handed off. Absent: file chips show without opening. */
-  open?: ChipOpener;
-}
-
-/** The chips' session facts (no session: nothing resolves, nothing links). */
-export const MarkdownContext = createContext<MarkdownContextValue>({ cwd: null, repoWebBase: null });
-
-/** Shows a chat by its id (a `#chat` card's title). The app provides it once; absent, the title is plain. */
-export const OpenSessionContext = createContext<((sessionId: string) => void) | null>(null);
-
-/** Where a session's commands come from: its folder, on this computer or a server. */
-export interface CommandScope {
-  /** The folder. */
-  cwd: string;
-  /** The server (`null`: this computer). */
-  hostId: string | null;
-}
-
-/** Inline code in running prose: the code tone, no outline. A path or identifier longer than the line breaks instead of running past the column. */
-export const INLINE_CODE_CLASS =
-  'px-1 py-0.5 rounded-[5px] bg-[var(--zg-code-bg)] text-[var(--zg-code-fg)] font-mono text-[0.85em] [overflow-wrap:anywhere]';
-
-/** The transcript's command scope (its container provides the session's). */
-export const CommandScopeContext = createContext<CommandScope | null>(null);