zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/ModelProviderPills.tsx

@@ -1,141 +0,0 @@
-/**
- * The model chain picker's tabs: one track, a pill for the pinned chain (In
- * use) then one per provider section (`⌘1`…`⌘9` jump to it), the active one
- * the raised chip gliding between pills. The row scrolls sideways (the row
- * only, never the page) to keep the active pill in view with a pill's worth
- * of margin.
- */
-import { memo, useEffect, useRef, useState, type CSSProperties } from 'react';
-import { motion } from 'motion/react';
-
-import { useReducedMotion } from '../../motion/reduced';
-import { useWithFade } from '../../motion/springs';
-import { providerColor } from '../provider-color';
-import { useChatLabels } from '../useChatLabels';
-import type { PickerGroup } from './model-catalog';
-
-/** Props for {@link ModelProviderPills}. */
-export interface ModelProviderPillsProps {
-  /** The sections to jump to, in list order: In use, then each provider. */
-  groups: readonly PickerGroup[];
-  /** The section under the list's top edge. */
-  active: string | null;
-  /** Compact one-line rows, as in the popover. */
-  dense: boolean;
-  /** Called with a section's key when the user clicks its pill. */
-  onJump: (key: string) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** The model chain picker's tabs: a pill for the pinned chain, then one per provider section. */
-export const ModelProviderPills = memo(function ModelProviderPills({
-  groups,
-  active,
-  dense,
-  onJump,
-  className,
-  style,
-}: ModelProviderPillsProps) {
-  const labels = useChatLabels();
-  const reducedMotion = useReducedMotion();
-  const pillRow = useRef<HTMLDivElement>(null);
-  // Kept after the section leaves the pills (a typed id's routes on top): it
-  // fades out in place and slides from there when a section comes back.
-  const pillTransition = useWithFade('snap');
-  const [indicator, setIndicator] = useState<{ left: number; width: number; key: string; on: boolean } | null>(null);
-  /*
-   * Measured in the next frame, where the browser lays out anyway: read during
-   * the commit, it forced a layout of the list that just changed into the
-   * keystroke's own task (typing changes the group count). The indicator
-   * springs to its place, so a frame later is invisible.
-   */
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      const row = pillRow.current;
-      const pill = active ? row?.querySelector<HTMLElement>(`[data-pill="${CSS.escape(active)}"]`) : null;
-      if (!row || !pill) {
-        setIndicator((prev) => (prev?.on ? { ...prev, on: false } : prev));
-        return;
-      }
-      const at = { left: pill.offsetLeft, width: pill.offsetWidth, key: active!, on: true };
-      setIndicator((prev) =>
-        prev?.on && prev.key === at.key && prev.left === at.left && prev.width === at.width ? prev : at,
-      );
-      const margin = 24;
-      const left = at.left - margin;
-      const right = at.left + at.width + margin;
-      if (left < row.scrollLeft) row.scrollTo({ left, behavior: reducedMotion ? 'auto' : 'smooth' });
-      else if (right > row.scrollLeft + row.clientWidth) {
-        row.scrollTo({ left: right - row.clientWidth, behavior: reducedMotion ? 'auto' : 'smooth' });
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- the group count changes the pill layout
-  }, [active, groups.length, dense]);
-
-  return (
-    <div className={['shrink-0 flex min-w-0 max-w-full', className].filter(Boolean).join(' ')} style={style}>
-      {/* One track; the active provider is the raised chip, gliding between pills. */}
-      <div
-        ref={pillRow}
-        className="zg-segment relative max-w-full overflow-x-auto overflow-y-hidden zg-no-scrollbar"
-        role="tablist"
-        aria-label={labels.modelsJumpToProvider}
-      >
-        {indicator && (
-          <motion.span
-            aria-hidden
-            data-on={indicator.on}
-            className="zg-pill-indicator absolute left-0 top-[2px] h-6 rounded-full pointer-events-none"
-            // Springs between pills; grows in the first time, fades in place when no provider is active.
-            initial={{ x: indicator.left, width: indicator.width, opacity: 0, scale: 0.85 }}
-            animate={{
-              x: indicator.left,
-              width: indicator.width,
-              opacity: indicator.on ? 1 : 0,
-              scale: indicator.on ? 1 : 0.92,
-            }}
-            transition={pillTransition}
-            style={{ background: 'var(--zg-raised)', boxShadow: 'var(--zg-shadow-raised)' }}
-          />
-        )}
-        {groups.map((g, i) => {
-          const inUse = g.key === 'in-use';
-          const label = inUse ? labels.modelsInUse : g.label;
-          const on = g.key === active;
-          return (
-            <button
-              key={g.key}
-              type="button"
-              role="tab"
-              data-pill={g.key}
-              aria-selected={on}
-              title={labels.modelsJumpHint(label, i < 9 ? i + 1 : null)}
-              onClick={() => onJump(g.key)}
-              // Hover lifts like any segment item; the active chip is the indicator underneath.
-              className={`zg-segment-item zg-press-subtle relative shrink-0 inline-flex items-center gap-1.5 h-6 rounded-full px-2.5 border-0 bg-transparent cursor-pointer text-zg-meta ${
-                on ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'
-              }`}
-            >
-              {/* The chain's pin, as on its section header; a provider's colour. */}
-              {inUse ? (
-                <span aria-hidden className="i-ph-push-pin-fill text-zg-badge text-[var(--zg-accent)]" />
-              ) : (
-                <span
-                  aria-hidden
-                  className="w-1.5 h-1.5 rounded-full"
-                  style={{ background: providerColor(g.providerKey!) }}
-                />
-              )}
-              {label}
-              <span className="zg-meta">{g.rows.length}</span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-});

package/src/chat/composer/PickerPill.tsx

@@ -1,41 +0,0 @@
-/**
- * The trigger chip for a composer picker: an item of the controls' one
- * `.zg-segment` track, raised while hovered or while its popover is open.
- * Spread a `Popover` trigger's props onto it. Shared with the desktop app's
- * composer.
- *
- * On a tight row a pill gives way so its text never spills: it shrinks, its
- * label truncating, or, `collapsible`, it keeps its size and folds to its icon.
- */
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
-
-/** Props for {@link PickerPill}: the attributes of a `button`, plus its content and `collapsible`. */
-export interface PickerPillProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** The pill's content: an icon, a label (`min-w-0 truncate`: a squeezed pill truncates it), and a caret. */
-  children: ReactNode;
-  /**
-   * Folds to its `zg-pill-icon` on a tight composer (styles/composer.css)
-   * instead of shrinking: mark the icon `zg-pill-icon` and the label and
-   * caret `zg-pill-label`.
-   */
-  collapsible?: boolean;
-}
-
-/** Renders the trigger chip for a composer picker, an item of the controls' segmented track. Spread a `Popover` trigger's props onto it. */
-export const PickerPill = forwardRef<HTMLButtonElement, PickerPillProps>(function PickerPill(
-  { children, collapsible = false, className = '', ...rest },
-  ref,
-) {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      className={`zg-segment-item zg-press-soft zg-focus-ring inline-flex items-center gap-1.5 h-6 px-2 rounded-full bg-transparent text-[var(--zg-text-muted)] border-0 cursor-pointer whitespace-nowrap max-w-full ${
-        collapsible ? 'zg-pill-collapsible shrink-0' : 'min-w-0'
-      } ${className}`}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-});

package/src/chat/composer/ProjectMenu.tsx

@@ -1,170 +0,0 @@
-/**
- * The folder side of a draft's scope toggle: a pill in the composer's
- * `.zg-segment` and its menu. The menu lists the projects to pick from
- * (recent folders, most recent first), the rows the caller puts above them,
- * "Import repository…" and "Select directory…".
- *
- * "Select directory…" either calls the caller (this computer: the native
- * dialog) or, with `browse`, turns the menu into a folder browser in place
- * (a server: `RemoteFolderBrowser`), with a row back to the projects.
- *
- * `ScopeToggle` (this computer) and `ServerScopeToggle` (a saved server) are
- * built on it, so both look and behave alike.
- */
-import { useState, type CSSProperties, type ReactNode } from 'react';
-
-import { Popover } from '../../components/floating/Popover';
-import { Menu, MenuRow, MenuSeparator } from '../../components/Menu';
-import { basename, compactPath } from '../../path';
-import { useComposerLabels } from './ComposerHostProvider';
-import { SCOPE_SIDE, scopeTone } from './scope-side';
-
-/** Props for {@link ProjectMenu}. */
-export interface ProjectMenuProps {
-  /** What the pill says. */
-  label: string;
-  /** The pill's tooltip. */
-  title: string;
-  /** The pill's icon class. Default: a folder. */
-  icon?: string;
-  /** The pill shows as the picked side of the toggle. */
-  active: boolean;
-  /** The pill can't be opened (a send is using the pick). */
-  disabled?: boolean;
-  /** The menu's accessible name. */
-  ariaLabel: string;
-  /** The projects to pick from, most recent first. */
-  projects: readonly string[];
-  /** The picked folder, checked in the list. */
-  current: string | null;
-  /** Picks a project. */
-  onPick: (folder: string) => void;
-  /** Rows above the projects; `close` closes the menu. */
-  leading?: (close: () => void) => ReactNode;
-  /** Imports a repository. Absent: not offered. */
-  onImportRepo?: () => void | Promise<void>;
-  /** "Select directory…" calls this (a native dialog). Ignored with `browse`. */
-  onSelectDirectory?: () => void | Promise<void>;
-  /** "Select directory…" shows this in the menu instead; `close` closes the menu. */
-  browse?: (close: () => void) => ReactNode;
-  /** Extra classes on the pill. */
-  className?: string;
-  /** Inline styles on the pill. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the folder pill and its project menu (see the header).
- *
- * @param props - The {@link ProjectMenuProps}.
- */
-export function ProjectMenu({
-  label,
-  title,
-  icon = 'i-ph-folder',
-  active,
-  disabled = false,
-  ariaLabel,
-  projects,
-  current,
-  onPick,
-  leading,
-  onImportRepo,
-  onSelectDirectory,
-  browse,
-  className,
-  style,
-}: ProjectMenuProps) {
-  const labels = useComposerLabels();
-  const [browsing, setBrowsing] = useState(false);
-  const canSelect = Boolean(browse || onSelectDirectory);
-
-  return (
-    <Popover
-      role="menu"
-      ariaLabel={ariaLabel}
-      align="end"
-      onOpenChange={(open) => {
-        if (!open) setBrowsing(false);
-      }}
-      className={browsing ? 'w-[340px] max-w-[92vw]' : 'min-w-[240px] max-w-[320px]'}
-      trigger={(props) => (
-        <button
-          {...props}
-          type="button"
-          aria-pressed={active}
-          data-active={active ? '' : undefined}
-          disabled={disabled}
-          title={title}
-          className={`${SCOPE_SIDE} ${scopeTone(active)} disabled:cursor-default${className ? ` ${className}` : ''}`}
-          style={style}
-        >
-          <span aria-hidden className={`${icon} text-zg-meta shrink-0`} />
-          <span className="max-w-[min(140px,18cqi)] truncate">{label}</span>
-        </button>
-      )}
-    >
-      {(close) =>
-        browsing && browse ? (
-          <div className="flex flex-col">
-            <Menu role="group" className="pb-0">
-              <MenuRow
-                role="menuitem"
-                icon={<span aria-hidden className="i-ph-caret-left" />}
-                title={labels.scopeBackToProjects}
-                onClick={() => setBrowsing(false)}
-              />
-            </Menu>
-            {browse(close)}
-          </div>
-        ) : (
-          <Menu role="group">
-            {leading?.(close)}
-            {projects.map((dir) => (
-              <MenuRow
-                key={dir}
-                role="menuitem"
-                hint={dir}
-                icon={<span aria-hidden className="i-ph-folder" />}
-                title={basename(dir)}
-                checked={dir === current}
-                trailing={<span className="zg-meta truncate max-w-[140px]">{compactPath(dir, 24)}</span>}
-                onClick={() => {
-                  close();
-                  onPick(dir);
-                }}
-              />
-            ))}
-            {(leading || projects.length > 0) && (onImportRepo || canSelect) && <MenuSeparator />}
-            {onImportRepo && (
-              <MenuRow
-                role="menuitem"
-                icon={<span aria-hidden className="i-ph-github-logo" />}
-                title={labels.scopeImportRepo}
-                onClick={() => {
-                  close();
-                  void onImportRepo();
-                }}
-              />
-            )}
-            {canSelect && (
-              <MenuRow
-                role="menuitem"
-                icon={<span aria-hidden className="i-ph-folder-open" />}
-                title={labels.scopeSelectDirectory}
-                onClick={() => {
-                  if (browse) {
-                    setBrowsing(true);
-                    return;
-                  }
-                  close();
-                  void onSelectDirectory?.();
-                }}
-              />
-            )}
-          </Menu>
-        )
-      }
-    </Popover>
-  );
-}

package/src/chat/composer/PromptHistoryProvider.tsx

@@ -1,214 +0,0 @@
-/**
- * Prompt history — per-session ring of past user submissions. ↑ / ↓ at
- * the first/last line of the prompt buffer cycles through the history,
- * mirroring the TUI's `cycleHistory` affordance (src/tui/prompt/use-prompt-history.ts).
- *
- * Contract:
- *   - `push(sessionId, text)` adds a fresh entry. Duplicates of the most
- *     recent entry are skipped so spam-pressing send doesn't fill the
- *     ring.
- *   - `cycle(sessionId, direction, draft)` walks the ring. The first
- *     call snapshots the live `draft` so scrolling ↓ past the newest
- *     entry restores it intact (matches the TUI's "save current edit on
- *     entry, restore on exit" UX).
- *   - `status(sessionId)` reports the navigation position for UI
- *     affordances ("history N/M"), or `null` when showing the live
- *     draft.
- *   - Deliberately IN-MEMORY ONLY, matching the TUI, which persists no
- *     prompt store and rebuilds history from the session transcript on
- *     reload. Raw prompts routinely embed secrets (`!` shell commands
- *     with tokens), so an unencrypted localStorage ring is not an
- *     acceptable persistence seam. Restart continuity should come from
- *     the transcript (canonical `promptHistoryFromEvents`) if ever
- *     needed — not from a second store.
- */
-import { createContext, useCallback, useContext, useMemo, useRef, type ReactNode } from 'react';
-
-/** The app's session id (the desktop app's session key). */
-type SessionKey = string;
-
-interface HistoryStateRow {
-  entries: string[];
-
-  /** Live cursor — `null` means "off the ring" (showing the live draft). */
-  cursor: number | null;
-
-  /** Draft snapshot taken when the user first hit ↑ / ↓. Restored on exit. */
-  draft: string | null;
-}
-
-/** The per-session prompt ring {@link usePromptHistory} returns. */
-export interface PromptHistoryValue {
-  /** Records a sent prompt as the session's newest entry and leaves navigation. */
-  push: (sessionId: SessionKey, text: string) => void;
-
-  /**
-   * Move through the history. Returns the text the prompt should
-   * display, or `null` when the cycle is a no-op (e.g. ↓ while already
-   * on the live draft).
-   */
-  cycle: (sessionId: SessionKey, direction: 'up' | 'down', currentBufferText: string) => string | null;
-
-  /** Reset the navigation cursor for a session (e.g. after submit). */
-  reset: (sessionId: SessionKey) => void;
-
-  /**
-   * Navigation position while cycling: `position` counts back from the
-   * newest entry (1 = most recent). `null` when the live draft is
-   * showing.
-   */
-  status: (sessionId: SessionKey) => { position: number; total: number } | null;
-}
-
-const PromptHistoryContext = createContext<PromptHistoryValue | null>(null);
-
-const MAX_ENTRIES = 50;
-
-/** Props for {@link PromptHistoryProvider}. */
-export interface PromptHistoryProviderProps {
-  /** The app's components. */
-  children: ReactNode;
-}
-
-/**
- * Holds every session's prompt ring for ↑ / ↓ recall, for the composers below it.
- *
- * @param props - The `children`.
- */
-export function PromptHistoryProvider({ children }: PromptHistoryProviderProps) {
-  const ref = useRef<Map<string, HistoryStateRow> | null>(null);
-
-  if (ref.current === null) {
-    ref.current = new Map();
-  }
-
-  const getRow = useCallback((sessionId: SessionKey): HistoryStateRow => {
-    const rows = ref.current!;
-    const existing = rows.get(sessionId);
-
-    if (existing) {
-      return existing;
-    }
-
-    const fresh: HistoryStateRow = { entries: [], cursor: null, draft: null };
-    rows.set(sessionId, fresh);
-
-    return fresh;
-  }, []);
-
-  const push = useCallback(
-    (sessionId: SessionKey, text: string) => {
-      const trimmed = text.trim();
-
-      if (!trimmed) {
-        return;
-      }
-
-      const row = getRow(sessionId);
-
-      if (row.entries[row.entries.length - 1] === trimmed) {
-        row.cursor = null;
-        row.draft = null;
-
-        return;
-      }
-
-      row.entries.push(trimmed);
-
-      if (row.entries.length > MAX_ENTRIES) {
-        row.entries.splice(0, row.entries.length - MAX_ENTRIES);
-      }
-
-      row.cursor = null;
-      row.draft = null;
-    },
-    [getRow],
-  );
-
-  const cycle = useCallback(
-    (sessionId: SessionKey, direction: 'up' | 'down', current: string): string | null => {
-      const row = getRow(sessionId);
-
-      if (row.entries.length === 0) {
-        return null;
-      }
-
-      /*
-       * First navigation step from a "live" buffer → snapshot it so ↓
-       * past the newest restores intact.
-       */
-      if (row.cursor === null) {
-        if (direction === 'down') {
-          // Already at the live end; nothing to do.
-          return null;
-        }
-
-        row.draft = current;
-        row.cursor = row.entries.length - 1;
-
-        return row.entries[row.cursor];
-      }
-
-      if (direction === 'up') {
-        const next = Math.max(0, row.cursor - 1);
-
-        if (next === row.cursor) {
-          return row.entries[row.cursor];
-        }
-
-        row.cursor = next;
-
-        return row.entries[row.cursor];
-      }
-
-      // direction === 'down'
-      if (row.cursor >= row.entries.length - 1) {
-        // Stepped past the newest entry → restore draft + exit cycle.
-        const draft = row.draft ?? '';
-        row.cursor = null;
-        row.draft = null;
-
-        return draft;
-      }
-
-      row.cursor += 1;
-
-      return row.entries[row.cursor];
-    },
-    [getRow],
-  );
-
-  const reset = useCallback(
-    (sessionId: SessionKey) => {
-      const row = getRow(sessionId);
-      row.cursor = null;
-      row.draft = null;
-    },
-    [getRow],
-  );
-
-  const status = useCallback((sessionId: SessionKey): { position: number; total: number } | null => {
-    const row = ref.current!.get(sessionId);
-
-    if (!row || row.cursor === null) {
-      return null;
-    }
-
-    return { position: row.entries.length - row.cursor, total: row.entries.length };
-  }, []);
-
-  const value = useMemo<PromptHistoryValue>(() => ({ push, cycle, reset, status }), [push, cycle, reset, status]);
-
-  return <PromptHistoryContext.Provider value={value}>{children}</PromptHistoryContext.Provider>;
-}
-
-/** The prompt ring from the nearest {@link PromptHistoryProvider}. Throws outside one. */
-export function usePromptHistory(): PromptHistoryValue {
-  const ctx = useContext(PromptHistoryContext);
-
-  if (!ctx) {
-    throw new Error('usePromptHistory must be used within PromptHistoryProvider');
-  }
-
-  return ctx;
-}

package/src/chat/composer/RetryPill.tsx

@@ -1,47 +0,0 @@
-/**
- * "retrying n/m" pill, visible only while a provider stream is being retried.
- *
- * Without it a stalled provider is indistinguishable from a hung app. The
- * source (`child-3`) tells the user whether their own turn is stuck or a
- * delegated one is.
- */
-import type { CSSProperties } from 'react';
-import { retryLabel } from 'zidane/chat/pure';
-
-import { useComposerLabels } from './ComposerHostProvider';
-
-/** A stream being retried (the stream store's retry state). */
-export type ComposerRetry = Parameters<typeof retryLabel>[0];
-
-/** Props for {@link RetryPill}. */
-export interface RetryPillProps {
-  /** The retry in progress, `null` for none (the pill hides). */
-  retry: ComposerRetry | null;
-  /** Extra classes on the pill. */
-  className?: string;
-  /** Inline styles, merged after its own. */
-  style?: CSSProperties;
-}
-
-const WARN: CSSProperties = { color: 'var(--zg-warn)' };
-
-/**
- * The retry pill (see the header).
- *
- * @param props - The {@link RetryPillProps}.
- */
-export function RetryPill({ retry, className, style }: RetryPillProps) {
-  const labels = useComposerLabels();
-  if (!retry) return null;
-
-  return (
-    <span
-      // Inline: the segment item's hover repaints `color`, and warn must hold.
-      style={style ? { ...WARN, ...style } : WARN}
-      className={`zg-segment-item inline-flex items-center h-6 px-2 rounded-full text-xs font-medium shrink-0 tabular-nums cursor-default${className ? ` ${className}` : ''}`}
-      title={labels.retryHint(retry.attempt, retry.max)}
-    >
-      {retryLabel(retry)}
-    </span>
-  );
-}