@tooee/view 0.11.0 → 0.12.0

package/src/folds/use-folds.ts

@@ -1,5 +1,5 @@
-import { useCommand, useCommandGroup } from "@tooee/commands";
-import type { CommandContext } from "@tooee/commands";
+import { useActions, useCommandGroup } from "@tooee/commands";
+import type { ActionDefinition, CommandContext, CommandHandler } from "@tooee/commands";
 import type { DecorationLayer } from "@tooee/renderers";
 import type { NavigationState } from "@tooee/shell";
 import { useMemo, useState } from "react";
@@ -76,36 +76,49 @@ export const useFoldState = function useFoldState<T>(
   };
 };
 
-const warnNoFold = function warnNoFold(ctx: CommandContext): void {
-  ctx.toast?.toast({ level: "warning", message: "No fold at cursor" });
-};
+/** Fold operations. Row arguments are full-array row indices. */
+export interface FoldActions {
+  /** Toggle the innermost fold that contains `row`. Returns false when no fold contains it. */
+  toggle: (row: number) => boolean;
+  /** Close the innermost open fold that contains `row`. Returns false when there is none. */
+  close: (row: number) => boolean;
+  /** Open the innermost closed fold that contains `row`. Returns false when there is none. */
+  open: (row: number) => boolean;
+  /** Open a fold at `row` when one is closed, else close the innermost open fold. */
+  toggleBlock: (row: number) => boolean;
+  closeAll: () => void;
+  openAll: () => void;
+}
 
 /**
- * Register the Vim fold commands (`z a`, `z c`, `z o`, `z shift+m`,
- * `z shift+r`) against a fold state and the controller's navigation. When a
- * close hides the cursor row, the cursor moves first to the header of the
- * outermost closed fold, and key preservation keeps it there.
+ * Fold operations over a fold state. Any change that hides the document
+ * cursor row first moves the cursor to the header of the outermost closed
+ * fold that hides it, and key preservation keeps it there. This holds for
+ * every target row, so a fold closed from the outline also keeps the cursor
+ * visible.
  */
-export const useFoldCommands = function useFoldCommands<T>(
+export const useFoldActions = function useFoldActions<T>(
   folds: FoldState<T>,
   navigation: Pick<NavigationState, "cursor" | "setCursor">
-): void {
+): FoldActions {
   const { closedKeys, ranges, rowCount, setClosedKeys, view } = folds;
   const { cursor, setCursor } = navigation;
-  const sourceRow = cursor === null ? undefined : view.visibleToSource[cursor];
-  const atCursor = sourceRow === undefined ? [] : foldsAt(ranges, sourceRow);
+  const cursorRow = cursor === null ? undefined : view.visibleToSource[cursor];
 
   const apply = (next: ReadonlySet<Key>) => {
-    if (sourceRow !== undefined) {
-      const anchor = visibleAnchorRow(computeFoldView(rowCount, ranges, next), sourceRow);
+    if (cursorRow !== undefined) {
+      const anchor = visibleAnchorRow(computeFoldView(rowCount, ranges, next), cursorRow);
       const anchorIndex = view.sourceToVisible[anchor] ?? -1;
-      if (anchor !== sourceRow && anchorIndex !== -1) {
+      if (anchor !== cursorRow && anchorIndex !== -1) {
         setCursor(anchorIndex);
       }
     }
     setClosedKeys(next);
   };
-  const withKey = (key: Key, closed: boolean) => {
+  const withKey = (key: Key | undefined, closed: boolean): boolean => {
+    if (key === undefined) {
+      return false;
+    }
     const next = new Set(closedKeys);
     if (closed) {
       next.add(key);
@@ -113,77 +126,78 @@ export const useFoldCommands = function useFoldCommands<T>(
       next.delete(key);
     }
     apply(next);
+    return true;
   };
+  const close = (row: number) =>
+    withKey(foldsAt(ranges, row).find((range) => !closedKeys.has(range.key))?.key, true);
+  const open = (row: number) =>
+    withKey(foldsAt(ranges, row).find((range) => closedKeys.has(range.key))?.key, false);
 
-  useCommandGroup({ id: "fold", prefix: "z", title: "Fold" });
-
-  useCommand({
-    category: "Fold",
-    handler: (ctx) => {
-      const [innermost] = atCursor;
-      if (innermost === undefined) {
-        warnNoFold(ctx);
-        return;
-      }
-      withKey(innermost.key, !closedKeys.has(innermost.key));
+  return {
+    close,
+    closeAll: () => {
+      apply(new Set(ranges.map((range) => range.key)));
     },
-    hotkey: "z a",
-    id: "fold.toggle",
-    modes: ["cursor"],
-    title: "Toggle fold",
-  });
-
-  useCommand({
-    category: "Fold",
-    handler: (ctx) => {
-      const target = atCursor.find((range) => !closedKeys.has(range.key));
-      if (target === undefined) {
-        warnNoFold(ctx);
-        return;
-      }
-      withKey(target.key, true);
+    open,
+    openAll: () => {
+      apply(EMPTY_KEYS);
     },
-    hotkey: "z c",
-    id: "fold.close",
-    modes: ["cursor"],
-    title: "Close fold",
-  });
-
-  useCommand({
-    category: "Fold",
-    handler: (ctx) => {
-      const target = atCursor.find((range) => closedKeys.has(range.key));
-      if (target === undefined) {
-        warnNoFold(ctx);
-        return;
-      }
-      withKey(target.key, false);
+    toggle: (row) => {
+      const [innermost] = foldsAt(ranges, row);
+      return withKey(innermost?.key, innermost !== undefined && !closedKeys.has(innermost.key));
     },
-    hotkey: "z o",
-    id: "fold.open",
-    modes: ["cursor"],
-    title: "Open fold",
-  });
+    toggleBlock: (row) =>
+      foldsAt(ranges, row).some((range) => closedKeys.has(range.key)) ? open(row) : close(row),
+  };
+};
 
-  useCommand({
+/**
+ * The Vim fold commands (`z a`, `z c`, `z o`, `z z`, `z shift+m`,
+ * `z shift+r`) as action definitions. The row commands act on `targetRow()`:
+ * the document cursor row on the root surface, or the selected heading in the
+ * outline. `idPrefix` keeps the ids apart on each surface, and `noFoldMessage`
+ * is the warning when no fold contains the target row.
+ */
+export const foldActionDefinitions = function foldActionDefinitions(
+  actions: FoldActions,
+  targetRow: () => number | undefined,
+  idPrefix: string,
+  noFoldMessage: string
+): ActionDefinition[] {
+  const atTarget =
+    (run: (row: number) => boolean) =>
+    (ctx: CommandContext): void => {
+      const row = targetRow();
+      if (row === undefined || !run(row)) {
+        ctx.toast?.toast({ level: "warning", message: noFoldMessage });
+      }
+    };
+  const definitions: [hotkey: string, id: string, title: string, handler: CommandHandler][] = [
+    ["z a", "toggle", "Toggle fold", atTarget(actions.toggle)],
+    ["z c", "close", "Close fold", atTarget(actions.close)],
+    ["z o", "open", "Open fold", atTarget(actions.open)],
+    ["z z", "toggle-block", "Open or close fold", atTarget(actions.toggleBlock)],
+    ["z shift+m", "close-all", "Close all folds", actions.closeAll],
+    ["z shift+r", "open-all", "Open all folds", actions.openAll],
+  ];
+  return definitions.map(([hotkey, id, title, handler]) => ({
     category: "Fold",
-    handler: () => {
-      apply(new Set(ranges.map((range) => range.key)));
-    },
-    hotkey: "z shift+m",
-    id: "fold.close-all",
+    handler,
+    hotkey,
+    id: `${idPrefix}.${id}`,
     modes: ["cursor"],
-    title: "Close all folds",
-  });
+    title,
+  }));
+};
 
-  useCommand({
-    category: "Fold",
-    handler: () => {
-      apply(EMPTY_KEYS);
-    },
-    hotkey: "z shift+r",
-    id: "fold.open-all",
-    modes: ["cursor"],
-    title: "Open all folds",
-  });
+/** Register the fold commands on the current surface, acting on the document cursor row. */
+export const useFoldCommands = function useFoldCommands<T>(
+  folds: FoldState<T>,
+  actions: FoldActions,
+  navigation: Pick<NavigationState, "cursor">
+): void {
+  const { cursor } = navigation;
+  const cursorRow = cursor === null ? undefined : folds.view.visibleToSource[cursor];
+  useCommandGroup({ id: "fold", prefix: "z", title: "Fold" });
+  useActions(foldActionDefinitions(actions, () => cursorRow, "fold", "No fold at cursor"));
 };

package/src/launch.tsx

@@ -23,6 +23,8 @@ export interface ViewLaunchOptions {
    * Unmatched types fall back to the default syntax-highlighted code block.
    */
   codeBlockRenderers?: Record<string, CodeBlockRenderer>;
+  /** Open the heading outline beside Markdown content at start. */
+  outline?: boolean;
 }
 
 export interface DirectoryLaunchOptions {

package/src/outline/markdown-outline.ts

@@ -0,0 +1,45 @@
+import { getPlainText } from "@tooee/renderers";
+import type { FlatBlock } from "@tooee/renderers";
+
+import { headingToken } from "../folds/markdown-heading-folds.js";
+
+/** One heading in a document outline. */
+export interface OutlineEntry {
+  /** The heading's index in the full row array, the same key folds use. */
+  row: number;
+  /** Heading level, 1 for `#`. */
+  depth: number;
+  /** Indent level in the outline: depth relative to the shallowest heading. */
+  level: number;
+  /** Unstyled heading text. */
+  text: string;
+}
+
+/**
+ * The headings of flattened Markdown blocks, in document order. Levels start
+ * at 0 for the shallowest heading in the document, so a document that starts
+ * at `##` is not indented.
+ */
+export const markdownOutline = function markdownOutline(
+  blocks: readonly FlatBlock[]
+): OutlineEntry[] {
+  const headings = blocks.flatMap((block, row) => {
+    const heading = headingToken(block);
+    return heading === null
+      ? []
+      : [{ depth: heading.depth, row, text: getPlainText(heading.tokens).trim() }];
+  });
+  const minDepth = Math.min(...headings.map((heading) => heading.depth));
+  return headings.map((heading) => ({ ...heading, level: heading.depth - minDepth }));
+};
+
+/**
+ * Index of the entry for the heading that contains `row`: the last heading at
+ * or before it. Returns `-1` before the first heading or for an empty outline.
+ */
+export const outlineIndexAt = function outlineIndexAt(
+  entries: readonly OutlineEntry[],
+  row: number
+): number {
+  return entries.findLastIndex((entry) => entry.row <= row);
+};

package/src/outline/outline-panel.tsx

@@ -0,0 +1,171 @@
+import type { MouseEvent, ScrollBoxRenderable } from "@opentui/core";
+import { useActions } from "@tooee/commands";
+import type { ActionDefinition } from "@tooee/commands";
+import { Panel, PanelGroup } from "@tooee/panels";
+import { useTheme } from "@tooee/themes";
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+
+import { foldActionDefinitions } from "../folds/use-folds.js";
+import type { FoldActions } from "../folds/use-folds.js";
+import type { OutlineEntry } from "./markdown-outline.js";
+import type { OutlineState } from "./use-outline.js";
+
+const OUTLINE_PANEL_ID = "outline";
+const INDENT = "  ";
+/** Columns the panel border and the list padding take from the panel width. */
+const OUTLINE_CHROME_WIDTH = 4;
+
+const entryId = (entry: OutlineEntry): string => `outline-entry-${entry.row}`;
+
+/** One outline line: indent, current-heading marker and text, cut to `width` columns. */
+export const outlineLabel = function outlineLabel(
+  entry: OutlineEntry,
+  current: boolean,
+  closed: boolean,
+  width: number
+): string {
+  const suffix = closed ? " ⋯" : "";
+  const label = `${INDENT.repeat(entry.level)}${current ? "▸ " : "  "}${entry.text}`;
+  const room = Math.max(1, width - suffix.length);
+  const cut = label.length > room ? `${label.slice(0, Math.max(0, room - 1))}…` : label;
+  return `${cut}${suffix}`;
+};
+
+/**
+ * The panel-owned outline commands. They register on the outline panel's
+ * surface, so they only dispatch while the outline has focus, and they shadow
+ * the root commands on the same keys. `g o` closes the outline here, because
+ * the panel's `g g` holds the `g` chord. The fold keys act on the selected
+ * heading's section, so the panel registers the whole `z` set.
+ */
+const OutlineCommands = function OutlineCommands({
+  outline,
+  foldActions,
+}: {
+  outline: OutlineState;
+  foldActions: FoldActions;
+}): null {
+  const next = (): void => {
+    outline.move(1);
+  };
+  const previous = (): void => {
+    outline.move(-1);
+  };
+  const first = (): void => {
+    outline.select(0);
+  };
+  const last = (): void => {
+    outline.select(outline.entries.length - 1);
+  };
+  const jump = (): void => {
+    outline.jump(outline.selectedIndex);
+  };
+  const commands: [hotkey: string, id: string, title: string, run: () => void][] = [
+    ["j", "outline.down", "Next heading", next],
+    ["down", "outline.down-arrow", "Next heading", next],
+    ["k", "outline.up", "Previous heading", previous],
+    ["up", "outline.up-arrow", "Previous heading", previous],
+    ["g g", "outline.first", "First heading", first],
+    ["shift+g", "outline.last", "Last heading", last],
+    ["enter", "outline.jump", "Jump to heading", jump],
+    ["escape", "outline.focus-content", "Return to document", outline.focusContent],
+    ["g o", "outline.close", "Close outline", outline.close],
+  ];
+  const selectedRow = (): number | undefined => outline.entries[outline.selectedIndex]?.row;
+  useActions([
+    ...commands.map(([hotkey, id, title, run]): ActionDefinition => ({
+      category: "Outline",
+      handler: run,
+      hotkey,
+      id,
+      modes: ["cursor"],
+      title,
+    })),
+    ...foldActionDefinitions(foldActions, selectedRow, "outline.fold", "No fold at heading"),
+  ]);
+  return null;
+};
+
+const OutlineList = function OutlineList({ outline }: { outline: OutlineState }): ReactNode {
+  const { theme } = useTheme();
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const textWidth = Math.max(1, outline.width - OUTLINE_CHROME_WIDTH);
+  const selected = outline.entries[outline.selectedIndex];
+
+  useEffect(() => {
+    if (selected !== undefined) {
+      scrollRef.current?.scrollChildIntoView(entryId(selected));
+    }
+  }, [selected]);
+
+  if (outline.entries.length === 0) {
+    return <text content="No headings" fg={theme.textMuted} paddingLeft={1} />;
+  }
+
+  return (
+    <scrollbox
+      ref={scrollRef}
+      style={{ flexGrow: 1 }}
+      focused={false}
+      verticalScrollbarOptions={{ visible: false }}
+    >
+      {outline.entries.map((entry, index): ReactNode => {
+        const current = index === outline.currentIndex;
+        const highlighted = outline.focused && index === outline.selectedIndex;
+        return (
+          <box
+            key={entry.row}
+            id={entryId(entry)}
+            paddingLeft={1}
+            paddingRight={1}
+            backgroundColor={highlighted ? theme.cursorLine : undefined}
+            onMouseDown={(event: MouseEvent) => {
+              event.stopPropagation();
+              outline.jump(index);
+            }}
+          >
+            <text
+              content={outlineLabel(entry, current, outline.closedRows.has(entry.row), textWidth)}
+              fg={current ? theme.accent : theme.text}
+            />
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+};
+
+/**
+ * The outline as a side panel. A controlled group with one panel: the panel
+ * is active only while the outline has focus, so the document keeps the root
+ * surface the rest of the time. Built-in Tab switching is off, so Tab keeps
+ * its multi-select meaning in the document.
+ */
+export const OutlinePanel = function OutlinePanel({
+  outline,
+  foldActions,
+}: {
+  outline: OutlineState;
+  foldActions: FoldActions;
+}): ReactNode {
+  if (!outline.visible) {
+    return null;
+  }
+  // The only panel asks for activation on a mouse-down inside it.
+  const handleActivePanelChange = (): void => {
+    outline.focus();
+  };
+  return (
+    <PanelGroup
+      activePanelId={outline.focused ? OUTLINE_PANEL_ID : null}
+      onActivePanelChange={handleActivePanelChange}
+      switchKeys={null}
+    >
+      <Panel id={OUTLINE_PANEL_ID} title="Outline" style={{ flexShrink: 0, width: outline.width }}>
+        <OutlineCommands outline={outline} foldActions={foldActions} />
+        <OutlineList outline={outline} />
+      </Panel>
+    </PanelGroup>
+  );
+};

package/src/outline/use-outline.ts

@@ -0,0 +1,188 @@
+import { useTerminalDimensions } from "@opentui/react";
+import { useCommand } from "@tooee/commands";
+import type { FlatBlock } from "@tooee/renderers";
+import type { DocumentController, NavigationState } from "@tooee/shell";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { closedFoldsHiding } from "../folds/fold-model.js";
+import type { FoldState } from "../folds/use-folds.js";
+import { markdownOutline, outlineIndexAt } from "./markdown-outline.js";
+import type { OutlineEntry } from "./markdown-outline.js";
+
+/** Outline width in columns, border included. */
+const OUTLINE_WIDTH = 32;
+/** The outline never takes more than this share of the terminal width. */
+const OUTLINE_MAX_SHARE = 0.4;
+/** Below this terminal width the outline is not shown. */
+export const OUTLINE_MIN_TERMINAL_WIDTH = 60;
+/**
+ * Lines of the document kept above a heading after a jump. The heading lands
+ * near the top of the view, with a little of the text before it for context.
+ */
+export const OUTLINE_JUMP_MARGIN = 3;
+
+/** Columns for the outline at a terminal width, or 0 when the terminal is too narrow. */
+export const outlineWidth = function outlineWidth(terminalWidth: number): number {
+  if (terminalWidth < OUTLINE_MIN_TERMINAL_WIDTH) {
+    return 0;
+  }
+  return Math.min(OUTLINE_WIDTH, Math.floor(terminalWidth * OUTLINE_MAX_SHARE));
+};
+
+/** State and actions of a document outline. */
+export interface OutlineState {
+  entries: readonly OutlineEntry[];
+  /** Entry of the heading that contains the document cursor, or -1. */
+  currentIndex: number;
+  /** Entry the outline highlights as selected: the current heading unless the outline has focus. */
+  selectedIndex: number;
+  /** Full-array rows whose own heading fold is closed. */
+  closedRows: ReadonlySet<number>;
+  /** True when the outline is open and the terminal is wide enough to show it. */
+  visible: boolean;
+  /** True when the visible outline owns keyboard input. */
+  focused: boolean;
+  /** Outline width in columns, or 0 when the terminal is too narrow. */
+  width: number;
+  focus: () => void;
+  focusContent: () => void;
+  close: () => void;
+  move: (delta: number) => void;
+  select: (index: number) => void;
+  /** Move the document cursor to an entry's heading and give focus back to the content. */
+  jump: (index: number) => void;
+}
+
+interface UseOutlineOptions {
+  blocks: readonly FlatBlock[];
+  folds: FoldState<FlatBlock>;
+  navigation: Pick<NavigationState, "cursor" | "setCursor">;
+  /** Scrolls a jumped-to heading near the top of the document view. */
+  revealRow: DocumentController<FlatBlock>["revealRow"];
+  initialOpen?: boolean;
+}
+
+/**
+ * Outline state for a Markdown document, and the root `g o` command that
+ * opens, focuses and closes it. A jump to a heading inside closed folds opens
+ * those folds, then moves the cursor once the new rows are in place. Every
+ * jump scrolls the heading to near the top of the view.
+ */
+export const useMarkdownOutline = function useMarkdownOutline({
+  blocks,
+  folds,
+  navigation,
+  revealRow,
+  initialOpen = false,
+}: UseOutlineOptions): OutlineState {
+  const entries = useMemo(() => markdownOutline(blocks), [blocks]);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const width = outlineWidth(terminalWidth);
+  const [open, setOpen] = useState(initialOpen);
+  const [focusRequested, setFocusRequested] = useState(false);
+  const [selected, setSelected] = useState(0);
+
+  const { closedKeys, ranges, setClosedKeys, view } = folds;
+  const { cursor, setCursor } = navigation;
+  const visible = open && width > 0;
+  const moveTo = useCallback(
+    (index: number) => {
+      setCursor(index);
+      revealRow(index, { align: "start", margin: OUTLINE_JUMP_MARGIN });
+    },
+    [setCursor, revealRow]
+  );
+  const focused = visible && focusRequested;
+  const sourceRow = cursor === null ? undefined : view.visibleToSource[cursor];
+  const currentIndex = sourceRow === undefined ? -1 : outlineIndexAt(entries, sourceRow);
+  const selectedIndex = focused ? Math.min(selected, entries.length - 1) : currentIndex;
+  const closedRows = useMemo(
+    () => new Set(ranges.filter((range) => closedKeys.has(range.key)).map((range) => range.start)),
+    [ranges, closedKeys]
+  );
+
+  // A jump that opens folds waits for the new fold view, then moves the
+  // cursor. This effect runs after the controller's own rows effect, so the
+  // store already holds the new rows.
+  const pendingRowRef = useRef<number | null>(null);
+  useEffect(() => {
+    const row = pendingRowRef.current;
+    const index = row === null ? -1 : (view.sourceToVisible[row] ?? -1);
+    if (index !== -1) {
+      pendingRowRef.current = null;
+      moveTo(index);
+    }
+  }, [view, moveTo]);
+
+  const focus = () => {
+    setSelected(Math.max(currentIndex, 0));
+    setFocusRequested(true);
+  };
+  const focusContent = () => {
+    setFocusRequested(false);
+  };
+  const close = () => {
+    setOpen(false);
+    setFocusRequested(false);
+  };
+  const select = (index: number) => {
+    setSelected(Math.max(0, Math.min(index, entries.length - 1)));
+  };
+  const move = (delta: number) => {
+    select(selectedIndex + delta);
+  };
+  const jump = (index: number) => {
+    const entry = entries[index];
+    setFocusRequested(false);
+    if (entry === undefined) {
+      return;
+    }
+    const hiding = closedFoldsHiding(ranges, closedKeys, entry.row);
+    if (hiding.length === 0) {
+      moveTo(view.sourceToVisible[entry.row] ?? 0);
+      return;
+    }
+    const next = new Set(closedKeys);
+    for (const key of hiding) {
+      next.delete(key);
+    }
+    pendingRowRef.current = entry.row;
+    setClosedKeys(next);
+  };
+
+  useCommand({
+    category: "Outline",
+    handler: (ctx) => {
+      if (width === 0) {
+        ctx.toast?.toast({ level: "info", message: "The outline needs a wider terminal" });
+        return;
+      }
+      if (open && focused) {
+        close();
+        return;
+      }
+      setOpen(true);
+      focus();
+    },
+    hotkey: "g o",
+    id: "outline.toggle",
+    modes: ["cursor"],
+    title: "Toggle outline",
+  });
+
+  return {
+    close,
+    closedRows,
+    currentIndex,
+    entries,
+    focus,
+    focusContent,
+    focused,
+    jump,
+    move,
+    select,
+    selectedIndex,
+    visible,
+    width,
+  };
+};

package/src/standalone-router.tsx

@@ -107,6 +107,7 @@ export const createStandaloneRouter = function createStandaloneRouter(
         codeBlockRenderers={options.codeBlockRenderers}
         contentProvider={provider}
         onMarkdownLinkActivate={activate}
+        outline={options.outline}
         renderers={options.renderers}
       />
     );

package/src/view.tsx

@@ -30,6 +30,8 @@ interface ViewProps {
   codeBlockRenderers?: Record<string, CodeBlockRenderer>;
   /** Handles primary-button activation of inline Markdown links. */
   onMarkdownLinkActivate?: MarkdownLinkActivateHandler;
+  /** Open the heading outline beside Markdown content at start. Other formats ignore it. */
+  outline?: boolean;
 }
 
 export const View = function View({
@@ -38,6 +40,7 @@ export const View = function View({
   renderers,
   codeBlockRenderers,
   onMarkdownLinkActivate,
+  outline,
 }: ViewProps): ReactNode {
   const { theme } = useTheme();
   const { content, streaming, error, providerMarks, reload } = useContentLoader(contentProvider);
@@ -101,6 +104,7 @@ export const View = function View({
           content={content}
           codeBlockRenderers={mergedCodeBlockRenderers}
           onLinkActivate={onMarkdownLinkActivate}
+          outline={outline}
           {...shared}
         />
       );