zidane-ui 9.0.4 → 9.1.3

package/src/code/editor/LanguageEditor.tsx

@@ -1,210 +0,0 @@
-/**
- * A `CodeEditor` with a language service (`EditorLanguage`): the file's
- * text goes to it on open and 300ms after each burst of edits; its findings
- * show as line annotations and squiggles; hovering a symbol shows the hover
- * card (findings first, then the service's answer); Cmd/Ctrl-click goes to
- * the definition; the card's "Find references" lists them in a menu.
- */
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-import type { LineAnnotation, SelectedLineRange } from '@pierre/diffs/react';
-
-import { RowActionsMenu, type RowActionItem } from '../../components/RowActionsMenu';
-import { useLabels } from '../../labels';
-import { CodeEditor, type CodeEditorHandle } from './CodeEditor';
-import { useHoverCard } from './CodeHover';
-import { DiagnosticAnnotation } from './DiagnosticAnnotation';
-import {
-  diagnosticMarkers,
-  diagnosticsAt,
-  diagnosticsByLine,
-  type EditorDiagnostic,
-  type EditorLocation,
-} from './diagnostics';
-import type { CodeToken } from './FileView';
-import type { EditorLanguage, EditorReveal } from './language';
-import type { CodeDocument } from './useCodeDocument';
-import { useDefinition } from './useDefinition';
-import { useRevealLine } from './useRevealLine';
-
-/** Edits are sent this long after the last keystroke, like the app's language servers. */
-export const LANGUAGE_DEBOUNCE_MS = 300;
-
-const NO_DIAGNOSTICS: readonly EditorDiagnostic[] = [];
-
-/** Props of {@link LanguageEditor}. */
-export interface LanguageEditorProps {
-  /** The file's path; the language service and navigation targets know it by this. */
-  path: string;
-  /** The file's state from `useCodeDocument`. */
-  doc: CodeDocument;
-  /** pierre's retained-session key (the draft and undo stack survive remounts under it). */
-  sessionKey: string;
-  /** Whether this editor is on screen; focus and ⌘F follow it. */
-  visible: boolean;
-  /** Never arm the editor. */
-  readOnly?: boolean;
-  /** The service for this file; `null`: a plain `CodeEditor` with no findings, hovers or navigation. */
-  language: EditorLanguage | null;
-  /** Open a file at a position (a definition, a reference). */
-  onNavigate?: (target: EditorLocation) => void;
-  /** Where to go in this file, once per nonce. */
-  reveal?: EditorReveal | null;
-  /** The file's findings changed (`null`: a check runs). */
-  onDiagnostics?: (path: string, items: readonly EditorDiagnostic[] | null) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A `CodeEditor` wired to a language service; see the module comment.
- *
- * @param props - See {@link LanguageEditorProps}.
- */
-export function LanguageEditor({
-  path,
-  doc,
-  sessionKey,
-  visible,
-  readOnly = false,
-  language,
-  onNavigate,
-  reveal,
-  onDiagnostics,
-  className,
-  style,
-}: LanguageEditorProps) {
-  const labels = useLabels();
-  const handle = useRef<CodeEditorHandle>(null);
-  const [findings, setFindings] = useState<readonly EditorDiagnostic[]>(NO_DIAGNOSTICS);
-  const [selected, setSelected] = useState<SelectedLineRange | null>(null);
-  const [references, setReferences] = useState<{
-    at: { x: number; y: number };
-    items: readonly EditorLocation[];
-  } | null>(null);
-
-  // The text, debounced: typing never waits on the service.
-  const { contents } = doc;
-  const sent = useRef(false);
-  useEffect(() => {
-    if (!language) return;
-    if (!sent.current) {
-      sent.current = true;
-      language.update(path, contents);
-      return;
-    }
-    const id = setTimeout(() => language.update(path, contents), LANGUAGE_DEBOUNCE_MS);
-    return () => clearTimeout(id);
-  }, [language, path, contents]);
-  useEffect(() => {
-    if (!language) return;
-    return language.diagnostics(path, (items) => {
-      if (items) setFindings(items);
-      onDiagnostics?.(path, items);
-    });
-  }, [language, path, onDiagnostics]);
-
-  const resolve = useCallback(
-    (line: number, column: number) => language?.definition(path, line, column) ?? Promise.resolve([]),
-    [language, path],
-  );
-  const navigate = useCallback((t: EditorLocation) => onNavigate?.(t), [onNavigate]);
-  const definition = useDefinition(path, language !== null && onNavigate !== undefined, resolve, navigate);
-  const lastPointer = useRef({ x: 0, y: 0 });
-  const findReferences = useCallback(
-    async (line: number, column: number) => {
-      const items = (await language?.references(path, line, column).catch(() => [])) ?? [];
-      setReferences({ at: lastPointer.current, items });
-    },
-    [language, path],
-  );
-  const actions = useMemo(
-    () =>
-      definition.enabled
-        ? [
-            { label: labels.goToDefinition, run: definition.goTo },
-            { label: labels.findReferences, run: findReferences },
-          ]
-        : [],
-    [definition.enabled, definition.goTo, findReferences, labels],
-  );
-  const hover = useHoverCard(
-    language ? (line, column) => language.hover(path, line, column).then((text) => ({ text })) : null,
-    actions,
-    contents,
-    (line, column) => diagnosticsAt(findings, line, column),
-  );
-  // Holding Cmd means "I want to jump": drop the card so it never sits under the click.
-  const leaveHover = hover.onLeave;
-  useEffect(() => {
-    if (!language) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Meta' || e.key === 'Control') leaveHover();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- onLeave is stable per mount
-  }, [language]);
-  const onTokenEnter = (t: CodeToken, e: PointerEvent) => {
-    const box = t.element.getBoundingClientRect();
-    lastPointer.current = { x: box.left, y: box.bottom + 4 };
-    hover.onEnter(t, e);
-    definition.onEnter(t);
-  };
-  const onTokenLeave = () => {
-    hover.onLeave();
-    definition.onLeave();
-  };
-
-  useRevealLine(handle, reveal, (line) => setSelected({ start: line, end: line }), !readOnly);
-
-  const annotations = useMemo<LineAnnotation<readonly EditorDiagnostic[]>[]>(
-    () => [...diagnosticsByLine(findings)].map(([lineNumber, items]) => ({ lineNumber, metadata: items })),
-    [findings],
-  );
-  const markers = useMemo(() => diagnosticMarkers(findings), [findings]);
-  const referenceItems = useMemo<RowActionItem[]>(
-    () =>
-      !references
-        ? []
-        : references.items.length === 0
-          ? [{ id: 'none', label: labels.noReferences, disabled: true, onSelect: () => {} }]
-          : references.items.map((r) => ({
-              id: `${r.path}:${r.line}:${r.column}`,
-              label: `${r.path}:${r.line}:${r.column}`,
-              onSelect: () => onNavigate?.(r),
-            })),
-    [references, labels, onNavigate],
-  );
-
-  return (
-    <CodeEditor<readonly EditorDiagnostic[]>
-      ref={handle}
-      path={path}
-      doc={doc}
-      sessionKey={sessionKey}
-      visible={visible}
-      readOnly={readOnly}
-      className={className}
-      style={style}
-      markers={markers}
-      selectedLines={selected}
-      onSelectionEnd={setSelected}
-      onTokenEnter={onTokenEnter}
-      onTokenLeave={onTokenLeave}
-      onTokenClick={definition.onClick}
-      annotations={annotations}
-      renderAnnotation={(a) => a.metadata && <DiagnosticAnnotation items={a.metadata} />}
-      hostAttributes={{ 'data-zg-linking': definition.linking ? 'true' : undefined }}
-    >
-      {hover.node}
-      <RowActionsMenu
-        open={references !== null}
-        position={references?.at ?? null}
-        onClose={() => setReferences(null)}
-        items={referenceItems}
-      />
-    </CodeEditor>
-  );
-}

package/src/code/editor/_vendor/tree-icon-colors.ts

@@ -1,72 +0,0 @@
-/**
- * Generated from @pierre/trees 1.0.0-beta.6 (dist/style.js, not exported by the package):
- * the file-icon colour per icon token, so icons drawn outside the tree
- * (FileIcon) match the Files tab. Regenerate when the package updates.
- */
-export const ICON_FAMILIES: Record<string, readonly [light: string, dark: string]> = {
-  gray: ['#84848a', '#adadb1'],
-  red: ['#d52c36', '#ff6762'],
-  vermilion: ['#ff8c5b', '#d5512f'],
-  orange: ['#d47628', '#ffa359'],
-  yellow: ['#d5a910', '#ffd452'],
-  green: ['#199f43', '#5ecc71'],
-  teal: ['#17a5af', '#64d1db'],
-  cyan: ['#1ca1c7', '#68cdf2'],
-  blue: ['#1a85d4', '#69b1ff'],
-  indigo: ['#693acf', '#9d6afb'],
-  purple: ['#a631be', '#d568ea'],
-  pink: ['#d32a61', '#ff678d'],
-  mauve: ['#594c5b', '#79697b'],
-};
-
-/** The colour family (a key of {@link ICON_FAMILIES}) per icon token; tokens missing here draw gray. */
-export const ICON_TOKEN_FAMILY: Record<string, string> = {
-  default: 'gray',
-  astro: 'purple',
-  babel: 'yellow',
-  bash: 'green',
-  biome: 'blue',
-  bootstrap: 'indigo',
-  browserslist: 'yellow',
-  bun: 'mauve',
-  c: 'blue',
-  cpp: 'blue',
-  claude: 'orange',
-  css: 'indigo',
-  database: 'purple',
-  docker: 'blue',
-  eslint: 'indigo',
-  go: 'cyan',
-  graphql: 'pink',
-  html: 'orange',
-  image: 'pink',
-  javascript: 'yellow',
-  json: 'orange',
-  markdown: 'green',
-  mcp: 'teal',
-  npm: 'red',
-  postcss: 'red',
-  prettier: 'teal',
-  python: 'blue',
-  react: 'cyan',
-  ruby: 'red',
-  rust: 'orange',
-  sass: 'pink',
-  svg: 'orange',
-  svelte: 'red',
-  svgo: 'green',
-  swift: 'orange',
-  table: 'teal',
-  text: 'gray',
-  tailwind: 'cyan',
-  terraform: 'indigo',
-  typescript: 'blue',
-  vite: 'purple',
-  vscode: 'blue',
-  vue: 'green',
-  wasm: 'indigo',
-  webpack: 'blue',
-  yml: 'red',
-  zig: 'orange',
-  zip: 'orange',
-};

package/src/code/editor/diagnostics.ts

@@ -1,140 +0,0 @@
-/**
- * Findings on a file's text (a type checker, a linter, a language server),
- * in one shape every editor surface reads: the line annotations, the
- * squiggles, the hover card and the header chip. Positions are 1-based.
- */
-import type { Marker } from '@pierre/diffs/edit';
-
-/** How serious a finding is; picks its glyph, colour and which count it adds to. */
-export type DiagnosticSeverity = 'error' | 'warning' | 'info' | 'hint';
-
-/** One finding on a file: where it sits, how serious it is, what it says and which tool raised it. */
-export interface EditorDiagnostic {
-  /** Relative to the editor's root. */
-  path: string;
-  /** 1-based line the range starts on. */
-  line: number;
-  /** 1-based column the range starts at. */
-  column: number;
-  /** 1-based line the range ends on. Defaults to `line`. */
-  endLine?: number;
-  /** 1-based column the range ends before (exclusive). Defaults to one character past `column`. */
-  endColumn?: number;
-  /** How serious the finding is. */
-  severity: DiagnosticSeverity;
-  /** The finding's text, as the tool wrote it. */
-  message: string;
-  /** Tool id (`tsc`, `eslint`, ...). */
-  source: string;
-  /** Rule / error code (`TS2322`, `no-unused-vars`). */
-  code?: string;
-}
-
-/** A position in a file a language service points at (a definition, a reference). */
-export interface EditorLocation {
-  /** Relative to the editor's root. */
-  path: string;
-  /** 1-based line. */
-  line: number;
-  /** 1-based column. */
-  column: number;
-}
-
-/** A span of a file's text, 1-based. */
-export interface EditorRange {
-  /** 1-based line the span starts on. */
-  line: number;
-  /** 1-based column the span starts at. */
-  column: number;
-  /** 1-based line the span ends on. */
-  endLine: number;
-  /** 1-based column the span ends before (exclusive). */
-  endColumn: number;
-}
-
-/** Where a symbol is defined, and the extent of the symbol it was asked from. */
-export interface EditorDefinition extends EditorLocation {
-  /**
-   * The symbol the definition was asked from, in the asking file, as the
-   * language service delimits it (LSP `originSelectionRange`): a whole
-   * import path rather than the word under the pointer. Cmd/Ctrl-hover
-   * underlines it. Absent when the service doesn't say.
-   */
-  origin?: EditorRange;
-}
-
-/** Icon class and text colour class each severity is drawn with, shared by the annotations, the chip and the hover card. */
-export const DIAGNOSTIC_GLYPH: Record<DiagnosticSeverity, { icon: string; tone: string }> = {
-  error: { icon: 'i-ph-x-circle-fill', tone: 'text-zg-danger' },
-  warning: { icon: 'i-ph-warning', tone: 'text-zg-warn' },
-  info: { icon: 'i-ph-info', tone: 'text-zg-info' },
-  hint: { icon: 'i-ph-lightbulb', tone: 'text-[var(--zg-text-muted)]' },
-};
-
-/**
- * Diagnostics whose range covers a 1-based (line, column), such as the findings under the pointer.
- *
- * @param items - The findings to filter.
- * @param line - 1-based line.
- * @param column - 1-based column.
- */
-export function diagnosticsAt<D extends EditorDiagnostic>(items: readonly D[], line: number, column: number): D[] {
-  return items.filter((d) => {
-    const endLine = d.endLine ?? d.line;
-    if (line < d.line || line > endLine) return false;
-    const startsBefore = line > d.line || column >= d.column;
-    const endsAfter = line < endLine || column < (d.endColumn ?? d.column + 1);
-    return startsBefore && endsAfter;
-  });
-}
-
-/**
- * How many findings are errors, warnings, and anything else (info and hints together).
- *
- * @param items - The findings to count.
- */
-export function countBySeverity(items: readonly EditorDiagnostic[]): {
-  errors: number;
-  warnings: number;
-  other: number;
-} {
-  let errors = 0;
-  let warnings = 0;
-  let other = 0;
-  for (const d of items) {
-    if (d.severity === 'error') errors++;
-    else if (d.severity === 'warning') warnings++;
-    else other++;
-  }
-  return { errors, warnings, other };
-}
-
-/**
- * The editor's squiggles (pierre markers, 0-based) for a set of findings. Each marker's message
- * carries the source and code after the text.
- *
- * @param items - The findings to mark.
- */
-export function diagnosticMarkers(items: readonly EditorDiagnostic[]): Marker[] {
-  return items.map((d) => ({
-    start: { line: d.line - 1, character: Math.max(0, d.column - 1) },
-    end: {
-      line: (d.endLine ?? d.line) - 1,
-      character: d.endColumn !== undefined ? Math.max(0, d.endColumn - 1) : Math.max(0, d.column - 1) + 1,
-    },
-    severity: d.severity,
-    message: d.code ? `${d.message} (${d.source} ${d.code})` : `${d.message} (${d.source})`,
-    source: d.source,
-  }));
-}
-
-/**
- * Findings grouped per line, in first-seen order: one annotation row each.
- *
- * @param items - The findings to group, keyed by their start line.
- */
-export function diagnosticsByLine<D extends EditorDiagnostic>(items: readonly D[]): Map<number, D[]> {
-  const byLine = new Map<number, D[]>();
-  for (const d of items) byLine.set(d.line, [...(byLine.get(d.line) ?? []), d]);
-  return byLine;
-}

package/src/code/editor/edit-session.ts

@@ -1,28 +0,0 @@
-/**
- * Keys for pierre's retained edit sessions (draft + undo stack kept across
- * remounts). The generation changes whenever a path's draft is reset
- * (discard, close, external reseed) so a fresh mount never resurrects an
- * old draft; the superseded session is released from memory.
- */
-import { EditStateManager } from '@pierre/diffs/edit';
-
-/**
- * The retained-session key of one draft generation of a file.
- *
- * @param cwd - The folder.
- * @param path - The file, relative to it.
- * @param generation - Bumped whenever the path's draft is reset.
- */
-export function editSessionKey(cwd: string, path: string, generation: number): string {
-  return `${cwd}:${path}:${generation}`;
-}
-
-/**
- * Drop a retained session. Safe to call while it is still active: the clear is deferred until it is dormant.
- *
- * @param key - Its key ({@link editSessionKey}).
- */
-export function forgetEditSession(key: string): void {
-  // The owning editor releases the session on unmount (next commit); clear after that.
-  setTimeout(() => EditStateManager.clear('file', key), 0);
-}

package/src/code/editor/environment.tsx

@@ -1,88 +0,0 @@
-/**
- * What the editor surfaces read from their app: the shiki theme and the
- * appearance pierre paints with, the editor settings and the motion
- * preference. Without a provider they follow the document's appearance
- * (the `.light` class on <html>) with the neutral GitHub themes and use
- * {@link DEFAULT_EDITOR_SETTINGS}.
- */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-import type { Appearance } from '../../theme/derive';
-import { useDocumentAppearance } from '../CodeHighlightProvider';
-import { defaultShikiTheme } from '../shiki-theme';
-
-/** How the editor behaves. */
-export interface EditorSettings {
-  /** Files are editable (⌘S saves). Off: every editor stays read-only. */
-  editing: boolean;
-  /** `blur`: save when the editor loses focus too. */
-  saveOn: 'manual' | 'blur';
-  /** How many columns a tab character paints across. */
-  tabSize: number;
-  /** Wrap long lines instead of scrolling sideways. */
-  wordWrap: boolean;
-  /** Highlight the bracket matching the one at the caret. */
-  matchBrackets: boolean;
-  /** Round the corners of selection highlights. */
-  roundedSelection: boolean;
-  /** Which pairs typing an opener wraps around a selection: the language's default, none, brackets only or quotes only. */
-  autoSurround: 'default' | 'never' | 'brackets' | 'quotes';
-}
-
-/** The settings without an {@link EditorEnvironmentProvider}: editable, manual saves, 2-space tabs, no wrap. */
-export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
-  editing: true,
-  saveOn: 'manual',
-  tabSize: 2,
-  wordWrap: false,
-  matchBrackets: true,
-  roundedSelection: true,
-  autoSurround: 'default',
-};
-
-/** The value of {@link EditorEnvironmentProvider}. */
-export interface EditorEnvironment {
-  /** A bundled shiki theme id. */
-  shikiTheme: string;
-  /** Light or dark: picks pierre's palette to match the theme. */
-  appearance: Appearance;
-  /** How the editors behave. */
-  settings: EditorSettings;
-  /** Scrolls jump instead of gliding (find, reveal). */
-  reducedMotion: boolean;
-}
-
-const EditorEnvironmentContext = createContext<EditorEnvironment | null>(null);
-
-/** Props for {@link EditorEnvironmentProvider}. */
-export interface EditorEnvironmentProviderProps {
-  /** The environment the editors below read. */
-  value: EditorEnvironment;
-  /** The subtree it applies to. */
-  children: ReactNode;
-}
-
-/**
- * Sets the environment of every editor surface below.
- *
- * @param props - The environment and the tree that reads it.
- */
-export function EditorEnvironmentProvider({ value, children }: EditorEnvironmentProviderProps) {
-  return <EditorEnvironmentContext.Provider value={value}>{children}</EditorEnvironmentContext.Provider>;
-}
-
-/** Returns the editor environment in effect. */
-export function useEditorEnvironment(): EditorEnvironment {
-  const provided = useContext(EditorEnvironmentContext);
-  const appearance = useDocumentAppearance(provided === null);
-  return useMemo(
-    () =>
-      provided ?? {
-        shikiTheme: defaultShikiTheme(appearance),
-        appearance,
-        settings: DEFAULT_EDITOR_SETTINGS,
-        reducedMotion: false,
-      },
-    [provided, appearance],
-  );
-}

package/src/code/editor/find/FindBar.tsx

@@ -1,126 +0,0 @@
-/**
- * Find in the open file or the diffs: the transcript find overlay's look
- * (floating chip, well input, previous / next / close), plus match case.
- * Enter / ⇧Enter step, Esc closes, ⌘F while open selects the query.
- */
-import { useEffect, useRef, type CSSProperties, type KeyboardEvent } from 'react';
-
-import { IconButton } from '../../../components/IconButton';
-import { Tooltip } from '../../../components/Tooltip';
-import { useLabels } from '../../../labels';
-import type { FindState } from './useFind';
-
-/** Props for {@link FindBar}. */
-export interface FindBarProps {
-  /** The find to drive, from {@link useFind}. */
-  find: FindState;
-  /** The search box's placeholder and the bar's accessible name ("Find in file"). */
-  label: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The find bar over a file view or diffs; renders nothing while `find` is closed.
- *
- * @param props - `find`: the state from {@link useFind}; `label`: the box's placeholder and accessible name.
- */
-export function FindBar({ find, label, className, style }: FindBarProps) {
-  const labels = useLabels();
-  const input = useRef<HTMLInputElement | null>(null);
-  // Opening (or asking again while open) puts the caret in the box, query selected.
-  useEffect(() => {
-    if (find.open) input.current?.select();
-  }, [find.open, find.asked]);
-  if (!find.open) return null;
-
-  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      find.step(e.shiftKey ? -1 : 1);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      find.close();
-    } else if (e.key.toLowerCase() === 'f' && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
-      e.preventDefault();
-      input.current?.select();
-    }
-  };
-  const count =
-    find.query === ''
-      ? null
-      : find.total === 0
-        ? find.searching
-          ? ''
-          : labels.findNoResults
-        : `${find.index + 1}/${find.total}${find.capped ? '+' : ''}`;
-
-  return (
-    <div
-      role="search"
-      aria-label={label}
-      className={['zg-float absolute top-2 right-3 z-30 flex items-center gap-1 p-1 max-w-[calc(100%-24px)]', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <label className="zg-well min-w-0 flex-1 flex items-center gap-1.5 h-7 pl-2 pr-1 cursor-text">
-        <span className="i-ph-magnifying-glass text-sm text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-        <input
-          ref={input}
-          type="text"
-          value={find.query}
-          onChange={(e) => find.setQuery(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder={label}
-          aria-label={label}
-          spellCheck={false}
-          className="w-40 min-w-0 flex-1 bg-transparent border-0 outline-none p-0 text-zg-ui text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-        />
-        {count !== null && (
-          <span className="zg-meta shrink-0 select-none tabular-nums" aria-live="polite">
-            {count}
-          </span>
-        )}
-        <Tooltip label={labels.findMatchCase} portal>
-          <button
-            type="button"
-            aria-pressed={find.caseSensitive}
-            aria-label={labels.findMatchCase}
-            onClick={() => {
-              find.toggleCase();
-              input.current?.focus();
-            }}
-            className={`zg-press-subtle shrink-0 h-5 px-1 rounded-zg-sm border-0 cursor-pointer text-zg-meta font-medium ${
-              find.caseSensitive
-                ? 'before:bg-[var(--zg-row-active)] text-[var(--zg-text)]'
-                : 'bg-transparent text-[var(--zg-text-muted)] hover:before:bg-[var(--zg-row-hover)]'
-            }`}
-          >
-            Aa
-          </button>
-        </Tooltip>
-      </label>
-      <IconButton
-        icon="i-ph-caret-up"
-        label={labels.findPrevious}
-        title={labels.findPreviousHint}
-        size="sm"
-        disabled={find.total === 0}
-        onClick={() => find.step(-1)}
-      />
-      <IconButton
-        icon="i-ph-caret-down"
-        label={labels.findNext}
-        title={labels.findNextHint}
-        size="sm"
-        disabled={find.total === 0}
-        onClick={() => find.step(1)}
-      />
-      <IconButton icon="i-ph-x" label={labels.findClose} title={labels.findCloseHint} size="sm" onClick={find.close} />
-    </div>
-  );
-}