zidane-ui 9.0.4 → 9.1.3

package/src/files/TreeColumn.tsx

@@ -1,229 +0,0 @@
-/**
- * The tree side of the Files tab: search row, toolbar (changed-only,
- * gitignored, refresh), the pierre tree, and the resize handle. It is an
- * animated spacer with a rigid sheet inside (same mechanics as the side
- * panel) so hiding it never reflows rows, and it mirrors for the
- * right-hand placement.
- */
-import {
-  memo,
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-
-import type { FilesTreeSide } from '../appearance/headless/prefs';
-import { FileTree, type FileTreeControl, type FileTreeEditing } from '../code/editor/FileTree';
-import { IconButton } from '../components/IconButton';
-import { IconToggle } from '../components/IconToggle';
-import { PanelEmpty, PanelLoading } from '../components/PanelEmpty';
-import { useResizeDrag } from '../hooks/useResizeDrag';
-import { readPanelMs, usePresence } from '../motion/presence';
-import type { FileActionTarget } from './file-actions';
-import type { GitStatusEntry, WorkspaceEntry } from './headless/host';
-import type { FilesLayoutStore } from './headless/view';
-import { useFilesLabels } from './useFilesLabels';
-
-export const TREE_WIDTH = { default: 220, min: 160, max: 480 };
-
-export interface TreeColumnProps {
-  /** Where the tree width is saved. */
-  layout: FilesLayoutStore;
-  cwd: string;
-  /** Whose tree it is (the files scope's key): a change shows its open state at once, no slide. */
-  scopeKey: string;
-  side: FilesTreeSide;
-  open: boolean;
-  width: number;
-  controlRef: RefObject<FileTreeControl | null>;
-  entries: WorkspaceEntry[] | null;
-  gitStatus: GitStatusEntry[];
-  selectedPath: string | null;
-  onSelect: (path: string | null) => void;
-  onOpen: (path: string, modifiers: { metaKey: boolean; ctrlKey: boolean }) => void;
-  onContextMenu: (target: Omit<FileActionTarget, 'cwd'>, at: { x: number; y: number }) => void;
-  changedOnly: boolean;
-  changedCount: number;
-  onToggleChanged: () => void;
-  showIgnored: boolean;
-  onToggleIgnored: () => void;
-  onRefresh: () => void;
-  /** Files open in the editor: their folders start expanded. */
-  openPaths: readonly string[];
-  /** ⌘⇧F results: shown in place of the tree (which stays mounted, hidden). */
-  search?: ReactNode;
-  /** Rename, create, drag and drop in the tree (a stable object). Absent: it only browses. */
-  editing?: FileTreeEditing;
-  /** The toolbar's New file / New folder. Absent: no such buttons. */
-  onNewEntry?: (kind: 'file' | 'folder') => void;
-  /** Keys pressed in the tree (cut, copy, paste, delete). */
-  onTreeKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
-  /** Why the last entry action was refused, shown above the tree until dismissed. */
-  notice?: string | null;
-  onDismissNotice?: () => void;
-}
-
-/** Typing stays instant; the model filter (a walk over every row) waits for a pause. */
-const SEARCH_DEBOUNCE_MS = 100;
-
-// Memoised: the tree only re-renders when its own inputs change, not on every tab update.
-const MemoFileTree = memo(FileTree);
-
-export const TreeColumn = memo(function TreeColumn(p: TreeColumnProps) {
-  const onRight = p.side === 'right';
-  const presence = usePresence(p.open, { enter: true, exitMs: readPanelMs, key: p.scopeKey });
-  const labels = useFilesLabels();
-  const colRef = useRef<HTMLDivElement | null>(null);
-  const drag = useResizeDrag({
-    value: p.width,
-    min: TREE_WIDTH.min,
-    max: TREE_WIDTH.max,
-    defaultValue: TREE_WIDTH.default,
-    edge: onRight ? 'start' : 'end',
-    target: { ref: colRef, cssVar: '--zg-files-tree-w' },
-    onCommit: (w) => p.layout.update({ filesTreeWidth: w }),
-  });
-
-  // Search lives here, not in FilesTab, so a keystroke re-renders this column only.
-  const [query, setQuery] = useState('');
-  const { controlRef, entries } = p;
-  useEffect(() => {
-    const t = window.setTimeout(() => controlRef.current?.setSearch(query), SEARCH_DEBOUNCE_MS);
-    return () => window.clearTimeout(t);
-  }, [controlRef, query]);
-  // The model filters itself; re-apply at once when the entry list is swapped.
-  const queryRef = useRef(query);
-  queryRef.current = query;
-  useEffect(() => {
-    controlRef.current?.setSearch(queryRef.current);
-  }, [controlRef, entries]);
-
-  if (!presence.mounted) return null;
-
-  return (
-    <div
-      ref={colRef}
-      className="zg-files-tree relative shrink-0 min-h-0"
-      data-collapsed={presence.state !== 'open'}
-      data-side={p.side}
-      style={{ '--zg-files-tree-w': `${p.width}px` } as CSSProperties}
-    >
-      <div className={`zg-files-tree-sheet absolute inset-y-0 ${onRight ? 'left-0' : 'right-0'} flex flex-col min-h-0`}>
-        {p.search && <div className="flex-1 min-h-0 flex flex-col">{p.search}</div>}
-        {/* Room on the outer edge for the tree toggle FilesTab overlays there. */}
-        <div hidden={!!p.search} className={`shrink-0 flex items-center h-9 ${onRight ? 'pl-2 pr-9' : 'pl-9 pr-2'}`}>
-          <div className="zg-well flex-1 min-w-0 flex items-center gap-1.5 h-7 px-2">
-            <span className="i-ph-magnifying-glass text-zg-label text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-            <input
-              type="text"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Escape') {
-                  e.preventDefault();
-                  setQuery('');
-                  e.currentTarget.blur();
-                }
-              }}
-              placeholder={labels.filesSearchFiles}
-              aria-label={labels.filesSearchFiles}
-              spellCheck={false}
-              className="flex-1 min-w-0 bg-transparent border-0 outline-none p-0 text-xs text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-            />
-            {query.length > 0 && (
-              <IconButton
-                size="xs"
-                icon="i-ph-x"
-                label={labels.filesClearSearch}
-                onClick={() => setQuery('')}
-                className="!rounded-full -mr-1"
-              />
-            )}
-          </div>
-        </div>
-        <div hidden={!!p.search} className="shrink-0 flex items-center gap-1 h-8 pl-3 pr-2">
-          <span className="zg-meta truncate flex-1" title={p.cwd}>
-            {p.cwd.split('/').pop()}
-          </span>
-          {p.onNewEntry && (
-            <div className="zg-segment shrink-0">
-              <IconToggle
-                active={false}
-                onClick={() => p.onNewEntry?.('file')}
-                icon="i-ph-file-plus"
-                label={labels.filesNewFile}
-              />
-              <IconToggle
-                active={false}
-                onClick={() => p.onNewEntry?.('folder')}
-                icon="i-ph-folder-plus"
-                label={labels.filesNewFolder}
-              />
-            </div>
-          )}
-          <div className="zg-segment shrink-0">
-            <IconToggle
-              active={p.changedOnly}
-              onClick={p.onToggleChanged}
-              icon="i-ph-git-commit"
-              label={p.changedOnly ? labels.filesAllFiles : labels.filesChangedOnly}
-              badge={p.changedCount > 0 ? String(p.changedCount) : undefined}
-            />
-            <IconToggle
-              active={p.showIgnored}
-              onClick={p.onToggleIgnored}
-              icon={p.showIgnored ? 'i-ph-eye' : 'i-ph-eye-slash'}
-              label={p.showIgnored ? labels.filesHideIgnored : labels.filesShowIgnored}
-            />
-            <IconToggle active={false} onClick={p.onRefresh} icon="i-ph-arrows-clockwise" label={labels.filesRefresh} />
-          </div>
-        </div>
-        {p.notice && !p.search && (
-          <div role="alert" className="zg-well shrink-0 flex items-center gap-1.5 h-7 mx-2 mb-1 pl-2 pr-1 text-xs">
-            <span className="i-ph-warning-circle text-zg-label text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-            <span className="flex-1 min-w-0 truncate text-[var(--zg-text)]" title={p.notice}>
-              {p.notice}
-            </span>
-            <IconButton size="xs" icon="i-ph-x" label={labels.filesDismiss} onClick={() => p.onDismissNotice?.()} />
-          </div>
-        )}
-        {p.entries === null ? (
-          !p.search && <PanelLoading />
-        ) : p.entries.length === 0 && !(p.editing && !p.changedOnly) ? (
-          !p.search && (
-            <PanelEmpty
-              icon="i-ph-tree-structure"
-              title={p.changedOnly ? labels.filesNoChanged : labels.filesEmptyFolder}
-            />
-          )
-        ) : (
-          // Kept mounted under search: its folds and selection survive.
-          // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the keys belong to the tree inside, which has the focus and the role
-          <div className={p.search ? 'hidden' : 'contents'} onKeyDown={p.onTreeKeyDown}>
-            <MemoFileTree
-              controlRef={p.controlRef}
-              entries={p.entries}
-              gitStatus={p.gitStatus}
-              selectedPath={p.selectedPath}
-              onSelect={p.onSelect}
-              onOpen={p.onOpen}
-              onContextMenu={p.onContextMenu}
-              openPaths={p.openPaths}
-              {...(p.editing ? { editing: p.editing } : {})}
-              className="flex-1 min-h-0"
-            />
-          </div>
-        )}
-      </div>
-      <div
-        {...drag.handleProps}
-        data-active={drag.active}
-        className={`zg-resize-handle ${onRight ? '-left-1' : '-right-1'}`}
-      />
-    </div>
-  );
-});

package/src/files/code-excerpt.ts

@@ -1,265 +0,0 @@
-/**
- * Pure helpers for turning a piece of code the user pointed at (a line
- * range in a file or diff, or a text selection) into the markdown the
- * model reads. Both the Files and Diffs tabs build their composer
- * attachments here.
- */
-import { classifyInlineCode } from '../chat/headless/file-chip';
-import type { AttachmentLabelParts } from '../chat/transcript/renderers';
-import type { FileDiffMetadata, SelectedLineRange } from '../code/editor/DiffView';
-
-export interface CodeSnippet {
-  filePath: string;
-  /** `L12` or `L12 to L18`; null for a free text selection. */
-  rangeLabel: string | null;
-  excerpt: string;
-  language: string;
-}
-
-export interface ReviewComment extends Omit<CodeSnippet, 'rangeLabel'> {
-  rangeLabel: string;
-  text: string;
-  /** `diff` (default) or `file`; only changes the lead-in wording. */
-  kind?: 'diff' | 'file';
-}
-
-export function rangeLabel(range: SelectedLineRange): string {
-  const a = Math.min(range.start, range.end);
-  const b = Math.max(range.start, range.end);
-  return a === b ? `L${a}` : `L${a} to L${b}`;
-}
-
-/** Lines `range` covers in a plain file (1-based, inclusive). */
-export function excerptFromContents(contents: string, range: SelectedLineRange): string {
-  const a = Math.min(range.start, range.end);
-  const b = Math.max(range.start, range.end);
-  return contents
-    .split(/\r?\n/)
-    .slice(a - 1, b)
-    .join('\n');
-}
-
-/**
- * Lines `range` covers on its side of `fileDiff`. pierre keeps the new
- * file's lines (context + additions) in `additionLines` and the old file's
- * (context + deletions) in `deletionLines`, both indexed from 0 while the
- * hunks carry the starting line numbers, so a side's line N is simply
- * `lines[N - 1]` once the hunks are walked to find which lines exist.
- */
-export function excerptFor(fileDiff: FileDiffMetadata, range: SelectedLineRange): string {
-  const a = Math.min(range.start, range.end);
-  const b = Math.max(range.start, range.end);
-  const side = range.side ?? 'additions';
-  const lines = side === 'deletions' ? fileDiff.deletionLines : fileDiff.additionLines;
-  const out: string[] = [];
-  for (const hunk of fileDiff.hunks) {
-    const start = side === 'deletions' ? hunk.deletionStart : hunk.additionStart;
-    for (const region of hunk.hunkContent) {
-      const count =
-        region.type === 'context' ? region.lines : side === 'deletions' ? region.deletions : region.additions;
-      const index = side === 'deletions' ? region.deletionLineIndex : region.additionLineIndex;
-      for (let i = 0; i < count; i++) {
-        const lineNo = lineNumberAt(hunk, region, i, side, start);
-        if (lineNo >= a && lineNo <= b) out.push((lines[index + i] ?? '').replace(/\r?\n$/, ''));
-      }
-    }
-  }
-  return out.join('\n');
-}
-
-/**
- * Line number of item `i` in `region` on `side`: the hunk start plus the
- * count of that side's lines in the preceding regions.
- */
-function lineNumberAt(
-  hunk: FileDiffMetadata['hunks'][number],
-  region: FileDiffMetadata['hunks'][number]['hunkContent'][number],
-  i: number,
-  side: 'additions' | 'deletions',
-  start: number,
-): number {
-  let n = start;
-  for (const r of hunk.hunkContent) {
-    if (r === region) return n + i;
-    n += r.type === 'context' ? r.lines : side === 'deletions' ? r.deletions : r.additions;
-  }
-  return n + i;
-}
-
-/**
- * Fence long enough to wrap content that itself contains backticks.
- *
- * @param text - The content to fence.
- */
-export function fenceFor(text: string): string {
-  const longest = Math.max(2, ...[...text.matchAll(/`+/g)].map((m) => m[0].length));
-  return '`'.repeat(longest + 1);
-}
-
-export function languageFor(path: string): string {
-  const ext = path.split('.').pop()?.toLowerCase() ?? '';
-  return ext.length <= 12 ? ext : '';
-}
-
-/** Excerpt only, for "add to chat" without a note. */
-export function serializeCodeSnippet(s: CodeSnippet): string {
-  const fence = fenceFor(s.excerpt);
-  const where = s.rangeLabel ? ` (${s.rangeLabel})` : '';
-  return [`From \`${s.filePath}\`${where}:`, '', `${fence}${s.language}`, s.excerpt, fence, ''].join('\n');
-}
-
-export function serializeReviewComment(c: ReviewComment): string {
-  const fence = fenceFor(c.excerpt);
-  return [
-    `${c.kind === 'file' ? 'Comment' : 'Review comment'} on \`${c.filePath}\` (${c.rangeLabel}):`,
-    '',
-    `${fence}${c.language}`,
-    c.excerpt,
-    fence,
-    '',
-    c.text.trim(),
-    '',
-  ].join('\n');
-}
-
-/**
- * `snippet-index.ts-L2toL8.md`: what the composer chip shows.
- *
- * @param prefix - `snippet`, `comment` or `diagnostic` (or an app's own kind).
- * @param filePath - The file the excerpt is from.
- * @param label - Its line range (`L2 to L8`), or `null` for a free selection.
- */
-export function attachmentName(prefix: string, filePath: string, label: string | null): string {
-  const base = filePath.split('/').pop() ?? filePath;
-  return `${prefix}-${base}${label ? `-${label.replace(/\s+/g, '')}` : ''}.md`;
-}
-
-/** What a code attachment's name says: its kind, file and line range. */
-export interface CodeAttachmentInfo {
-  /** `terminal`: lines from a terminal ({@link serializeTerminalExcerpt}); `file` is then the terminal's label. */
-  kind: 'comment' | 'snippet' | 'diagnostic' | 'terminal';
-  /** Basename of the file the excerpt came from. */
-  file: string;
-  /** `L12 to L18` or null for a free text selection. */
-  rangeLabel: string | null;
-}
-
-/**
- * Inverse of `attachmentName`; null for any other attachment.
- *
- * @param name - An attachment's name.
- */
-export function parseCodeAttachmentName(name: string): CodeAttachmentInfo | null {
-  const m = /^(comment|snippet|diagnostic|terminal)-(.+?)(?:-(L\d+(?:toL\d+)?))?\.md$/.exec(name);
-  if (!m) return null;
-  const range = m[3] ? m[3].replace('toL', ' to L') : null;
-  return { kind: m[1] as CodeAttachmentInfo['kind'], file: m[2], rangeLabel: range };
-}
-
-/**
- * The icon and name a non-image attachment shows: a code attachment (`comment-<file>-L1toL9.md`,
- * `snippet-<file>.md`, a terminal's lines) shows its source's icon and name with the range, a PDF the PDF
- * icon, anything else `fallbackIcon`. An app's `attachmentLabel` renderer slot.
- *
- * @param name - The attachment's file name.
- * @param fallbackIcon - The icon of any other file.
- */
-export function codeAttachmentLabel(name: string, fallbackIcon = 'i-ph-file'): AttachmentLabelParts {
-  const code = parseCodeAttachmentName(name);
-  if (!code) return { icon: /\.pdf$/i.test(name) ? 'i-ph-file-pdf' : fallbackIcon, name };
-  if (code.kind === 'terminal') {
-    const detail = terminalRangeDetail(code.rangeLabel);
-    return { icon: 'i-ph-terminal-window', name: code.file, ...(detail ? { detail } : {}) };
-  }
-  const chip = classifyInlineCode(code.file);
-  const detail = code.rangeLabel ? `${code.kind} on ${code.rangeLabel}` : code.kind;
-  return {
-    icon: chip?.icon ?? 'i-ph-file-code',
-    ...(chip?.tone ? { tone: chip.tone } : {}),
-    ...(chip?.badge ? { badge: chip.badge } : {}),
-    name: code.file,
-    detail,
-  };
-}
-
-/** Lines selected in a terminal, to attach to the composer. */
-export interface TerminalExcerpt {
-  /** The terminal's label ("Terminal 1", or the agent's command). */
-  label: string;
-  /** The selection's first buffer line (1-based, inclusive). */
-  startLine: number;
-  /** Its last buffer line (1-based, inclusive). */
-  endLine: number;
-  /** The selected text. */
-  text: string;
-}
-
-/**
- * A terminal selection's range label: `L12 to L18`, `L3` for one line (either order).
- *
- * @param startLine - One end of the selection (1-based).
- * @param endLine - The other end.
- */
-export function terminalRangeLabel(startLine: number, endLine: number): string {
-  const a = Math.min(startLine, endLine);
-  const b = Math.max(startLine, endLine);
-  return a === b ? `L${a}` : `L${a} to L${b}`;
-}
-
-/**
- * `L12 to L18` → `lines 12–18`, `L3` → `line 3`: the chip's wording.
- *
- * @param rangeLabel - A {@link terminalRangeLabel}, or `null`.
- */
-export function terminalRangeDetail(rangeLabel: string | null): string | undefined {
-  if (!rangeLabel) return undefined;
-  const m = /^L(\d+)(?: to L(\d+))?$/.exec(rangeLabel);
-  if (!m) return rangeLabel;
-  return m[2] ? `lines ${m[1]}–${m[2]}` : `line ${m[1]}`;
-}
-
-/** File names can't hold `/`; the label is what the chip shows, so keep it readable. */
-function safeTerminalLabel(label: string): string {
-  return label.replace(/[/\\]/g, '∕').replace(/\s+/g, ' ').trim().slice(0, 60) || 'Terminal';
-}
-
-/**
- * A terminal selection as a composer attachment, named and fenced like code excerpts so its chip reads
- * `Terminal 1`, then `lines 12–18`.
- *
- * @param e - The selection.
- */
-export function serializeTerminalExcerpt(e: TerminalExcerpt): { name: string; body: string } {
-  const range = terminalRangeLabel(e.startLine, e.endLine);
-  const text = e.text.replace(/\s+$/, '');
-  const fence = fenceFor(text);
-  const detail = terminalRangeDetail(range);
-  return {
-    name: attachmentName('terminal', safeTerminalLabel(e.label), range),
-    body: [`From the terminal "${e.label}" (${detail}):`, '', `${fence}text`, text, fence, ''].join('\n'),
-  };
-}
-
-export interface DiagnosticSnippet extends CodeSnippet {
-  severity: string;
-  source: string;
-  code?: string;
-  diagnosticMessage: string;
-}
-
-/** A tool finding with the lines it points at, for "add to chat". */
-export function serializeDiagnostic(s: DiagnosticSnippet): string {
-  const fence = fenceFor(s.excerpt);
-  const where = s.rangeLabel ? ` (${s.rangeLabel})` : '';
-  const code = s.code ? ` ${s.code}` : '';
-  return [
-    `${s.source}${code} ${s.severity} in \`${s.filePath}\`${where}:`,
-    '',
-    s.diagnosticMessage.trim(),
-    '',
-    `${fence}${s.language}`,
-    s.excerpt,
-    fence,
-    '',
-  ].join('\n');
-}

package/src/files/code-menu.ts

@@ -1,53 +0,0 @@
-/**
- * What a right-click inside a pierre code view points at, resolved from
- * the DOM, in priority order: a native text selection inside the code,
- * the currently selected line range, or the single line under the cursor.
- * Pure apart from reading the event's composed path and the selection.
- */
-import type { SelectedLineRange } from '../code/editor/DiffView';
-
-export type CodeMenuTarget =
-  | { kind: 'text'; text: string }
-  | { kind: 'range'; range: SelectedLineRange }
-  | { kind: 'line'; range: SelectedLineRange };
-
-/** Chrome exposes the shadow root's selection; the type lib does not. */
-type ShadowRootWithSelection = ShadowRoot & { getSelection?: () => Selection | null };
-
-export function textSelectionIn(container: Element | null): string | null {
-  const root = container?.shadowRoot as ShadowRootWithSelection | undefined;
-  const sel = root?.getSelection?.() ?? window.getSelection();
-  if (!sel || sel.isCollapsed) return null;
-  if (container && sel.anchorNode && !container.contains(sel.anchorNode) && !root?.contains(sel.anchorNode)) {
-    return null;
-  }
-  const text = sel.toString().replace(/\n$/, '');
-  return text.trim().length > 0 ? text : null;
-}
-
-/** The line under `path`, from pierre's `data-line` / `data-column-number` cells. */
-export function lineAt(path: readonly EventTarget[]): SelectedLineRange | null {
-  for (const node of path) {
-    if (!(node instanceof HTMLElement)) continue;
-    const raw = node.getAttribute('data-column-number') ?? node.getAttribute('data-line');
-    if (raw === null) continue;
-    const n = Number.parseInt(raw, 10);
-    if (Number.isNaN(n)) return null;
-    const type = node.getAttribute('data-line-type') ?? '';
-    const side = type.includes('deletion') ? 'deletions' : 'additions';
-    return { start: n, end: n, side };
-  }
-  return null;
-}
-
-export function resolveCodeMenuTarget(
-  path: readonly EventTarget[],
-  selected: SelectedLineRange | null,
-): CodeMenuTarget | null {
-  const container = path.find((n) => n instanceof Element && n.tagName === 'DIFFS-CONTAINER') as Element | undefined;
-  const text = textSelectionIn(container ?? null);
-  if (text) return { kind: 'text', text };
-  if (selected) return { kind: 'range', range: selected };
-  const line = lineAt(path);
-  return line ? { kind: 'line', range: line } : null;
-}