@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.111

package/src/workbench/components/EditorGrid.zoom.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * Regression: the header controls (search, zoom, split) stay pinned to the right
+ * edge whatever the container width parity. A lone flexGrow tab strip used to
+ * underfill by a cell at even widths, dragging the zoom icon a column left when
+ * zoom widened the pane; space-between pins the controls so the column is stable.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { EditorGrid } from "./EditorGrid";
+import { changesTab, fileTab, makeGroup, splitGroup } from "./editor-grid";
+import { NERD } from "../../ui/components/primitives/icons";
+import { allowEventLoopUpdates } from "../../testing/test-support";
+
+const grid = makeGroup([changesTab(), fileTab("App.tsx", "src/App.tsx", "diff")]);
+
+async function zoomIconInsetFromRight(width: number, zoomed: boolean): Promise<number> {
+  const setup = await testRender(
+    <EditorGrid
+      tree={grid}
+      focusedGroupId={grid.id}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={zoomed}
+      renderTab={() => <text>body</text>}
+    />,
+    { width, height: 6 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  const line = setup
+    .captureCharFrame()
+    .split("\n")
+    .find((row) => row.includes("⛶"));
+  const inset = line ? width - line.indexOf("⛶") : -1;
+
+  setup.renderer.destroy();
+
+  return inset;
+}
+
+describe("zoom icon position", () => {
+  test("stays a fixed inset from the right edge across width parities", async () => {
+    // Act - even and odd widths flip the flexGrow rounding the old layout was sensitive to
+    const insets = await Promise.all([
+      zoomIconInsetFromRight(100, false),
+      zoomIconInsetFromRight(101, false),
+      zoomIconInsetFromRight(102, false),
+    ]);
+
+    // Assert - one inset for all widths: the icon is pinned right, not drifting with parity
+    expect(new Set(insets).size).toBe(1);
+    expect(insets[0]).toBeGreaterThan(0);
+  });
+
+  test("does not shift when zoom becomes active", async () => {
+    // Act
+    const inactive = await zoomIconInsetFromRight(100, false);
+    const active = await zoomIconInsetFromRight(100, true);
+
+    // Assert - active only recolours the glyph; it must not move
+    expect(active).toBe(inactive);
+  });
+});
+
+test("split stays in every header while zoom appears only in the upper-right group", async () => {
+  const first = makeGroup([changesTab()]);
+  const right = splitGroup(first, first.id, "right");
+  const upperRight = splitGroup(right.tree, right.focusGroupId, "up");
+  const setup = await testRender(
+    <EditorGrid
+      tree={upperRight.tree}
+      focusedGroupId={upperRight.focusGroupId}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={false}
+      renderTab={() => <text>body</text>}
+    />,
+    { width: 100, height: 16 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  const rows = setup.captureCharFrame().split("\n");
+  const headers = rows.filter((row) => row.includes("split"));
+
+  expect([...rows.join("\n").matchAll(/split/g)]).toHaveLength(3);
+  expect(headers[0]).toContain(NERD.zoom);
+  expect(headers[1]).not.toContain(NERD.zoom);
+  expect(rows.filter((row) => row.includes(NERD.zoom))).toHaveLength(1);
+  setup.renderer.destroy();
+});
+
+test("zoom keeps a full cell at the right edge of a narrow split", async () => {
+  const first = makeGroup([changesTab()]);
+  const split = splitGroup(first, first.id, "right");
+
+  for (const width of [50, 51, 100]) {
+    for (const zoomed of [false, true]) {
+      const setup = await testRender(
+        <EditorGrid
+          tree={split.tree}
+          focusedGroupId={split.focusGroupId}
+          onFocusGroup={() => {}}
+          onActivateTab={() => {}}
+          onCloseTab={() => {}}
+          onSplit={() => {}}
+          onZoom={() => {}}
+          zoomed={zoomed}
+          renderTab={() => <text>body</text>}
+        />,
+        { width, height: 8 },
+      );
+
+      allowEventLoopUpdates();
+      await setup.waitForVisualIdle();
+      const header = setup.captureCharFrame().split("\n")[0]!;
+
+      expect(header.match(/⛶/g)).toHaveLength(1);
+      expect(width - header.indexOf(NERD.zoom)).toBe(2);
+      setup.renderer.destroy();
+    }
+  }
+});

package/src/workbench/components/FileContentsView.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { FileContentsView } from "./FileContentsView";
+
+export const meta: StoryMeta = { title: "Surfaces/FileContentsView" };
+
+const SAMPLE = `export function add(a: number, b: number): number {\n  return a + b;\n}\n`;
+
+export const Loaded: Story = {
+  render: () => (
+    <FileContentsView path="src/add.ts" loadContents={() => Promise.resolve(SAMPLE)} theme={DARK} />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 60, height: 12 },
+};

package/src/workbench/components/FileContentsView.test.tsx

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { FileContentsView } from "./FileContentsView";
+import { waitForText } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+
+test("renders the loaded file contents", async () => {
+  const setup = await testRender(
+    <FileContentsView
+      path="src/add.ts"
+      loadContents={() => Promise.resolve("const answer = 42;\n")}
+      theme={DARK}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "const answer = 42;");
+});
+
+test("shows a centered File deleted message when the file cannot be read", async () => {
+  const setup = await testRender(
+    <FileContentsView path="missing.ts" loadContents={() => Promise.resolve(null)} theme={DARK} />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "File deleted");
+  expect(setup.captureCharFrame()).toContain("File deleted");
+});

package/src/workbench/components/FileContentsView.tsx

@@ -0,0 +1,104 @@
+// A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
+// Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
+// Syntax highlighting comes from the native code renderable (tree-sitter), the language
+// auto-detected from the path; unknown languages simply render unstyled.
+
+import { ScrollArea } from "../../ui/components/ScrollArea";
+import React, { useEffect, useRef, useState } from "react";
+import type { CodeRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { filetypeForPath, syntaxStyleFor } from "../../ui/components/syntax-highlight";
+
+export interface FileContentsViewProps {
+  path: string;
+  loadContents: (path: string) => Promise<string | null>;
+  theme?: Theme;
+}
+
+/** A finished read for a specific path; `lines` is null when the file could not be read. */
+interface FileLoad {
+  path: string;
+  lines: string[] | null;
+}
+
+export function FileContentsView({
+  path,
+  loadContents,
+  theme,
+}: FileContentsViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const [loaded, setLoaded] = useState<FileLoad | null>(null);
+  // The gutter mirrors the code renderable's line info, so it needs the mounted
+  // instance; a state-backed ref rebinds the target once the code renderable exists.
+  const [codeTarget, setCodeTarget] = useState<CodeRenderable | null>(null);
+  const loadRef = useRef(loadContents);
+
+  useEffect(() => {
+    loadRef.current = loadContents;
+  });
+
+  useEffect(() => {
+    let alive = true;
+
+    void loadRef.current(path).then(
+      (contents) => {
+        if (alive) setLoaded({ path, lines: contents === null ? null : contents.split("\n") });
+      },
+      () => {
+        if (alive) setLoaded({ path, lines: null });
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [path]);
+
+  if (loaded === null || loaded.path !== path) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+
+  if (loaded.lines === null) {
+    // a file that no longer reads in the Changes/Project view is one the working tree deleted;
+    // the bottom pad lifts the text one row so it lines up with the footer-shortened thread empty state
+    return (
+      <box
+        style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", paddingBottom: 2 }}
+      >
+        <text fg={tokens.textDim}>File deleted</text>
+      </box>
+    );
+  }
+
+  const content = loaded.lines.join("\n");
+
+  return (
+    <ScrollArea>
+      <line-number
+        target={codeTarget ?? undefined}
+        showLineNumbers
+        fg={tokens.textDim}
+        minWidth={5}
+        paddingRight={1}
+        style={{ paddingTop: 1, paddingLeft: 1 }}
+      >
+        <code
+          ref={setCodeTarget}
+          content={content}
+          filetype={filetypeForPath(path)}
+          syntaxStyle={syntaxStyleFor(tokens, renderer.nativeScene)}
+          selectable={false}
+          style={{ wrapMode: "none", fg: tokens.text }}
+        />
+      </line-number>
+    </ScrollArea>
+  );
+}

package/src/workbench/components/GridTabContent.actions.test.tsx

@@ -0,0 +1,151 @@
+/** File tabs keep path actions while only the aggregate Changes tab can fold a file. */
+
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { changesTab, fileTab } from "./editor-grid";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { FIXTURE_PATCH, fixtureDiffSession } from "../../stories/story-fixtures";
+import { NERD } from "../../ui/components/primitives/icons";
+import { TooltipProvider } from "../../ui/components/Tooltip";
+import { locateText, waitForText } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+import { diffRows } from "../../diff/view-diff";
+
+const noop = (): void => {};
+const rows = diffRows(
+  FIXTURE_PATCH.replaceAll("src/store.ts", "src/store.txt").replace("-1,4 +1,4", "-1,3 +1,3"),
+);
+const surface: DiffSurfaceProps = {
+  session: fixtureDiffSession(),
+  quickActions: [],
+  observer: false,
+  onAnnotate: noop,
+  onReply: noop,
+  onUpdateAnnotation: noop,
+  onExit: noop,
+};
+
+test("a single-file diff keeps copy and expand without a collapse action", async () => {
+  const copied: string[] = [];
+  const setup = await testRender(
+    <TooltipProvider theme={DARK}>
+      <GridTabContent
+        tab={fileTab("store.txt", "src/store.txt", "diff")}
+        rows={rows}
+        surface={surface}
+        rejectedRows={new Set()}
+        fold={{
+          isCollapsed: () => false,
+          isExpanded: () => false,
+          canExpand: () => true,
+          onToggleCollapse: noop,
+          onToggleExpand: noop,
+          onCopyPath: (file) => {
+            copied.push(file);
+
+            return true;
+          },
+        }}
+        dimmed={false}
+        readFile={async () => null}
+        onAddFileComment={noop}
+        theme={DARK}
+      />
+    </TooltipProvider>,
+    { width: 80, height: 12 },
+  );
+
+  await waitForText(setup, "src/store.txt");
+  const frame = setup.captureCharFrame();
+
+  expect(frame).toContain(NERD.copy);
+  expect(frame).not.toContain("v src/store.txt");
+  expect(frame).toContain("expand");
+  const copy = locateText(setup, NERD.copy);
+
+  await setup.mockMouse.moveTo(copy.column, copy.row);
+  await waitForText(setup, "Copy path");
+  await setup.mockMouse.click(copy.column, copy.row);
+  expect(copied).toEqual(["src/store.txt"]);
+  await waitForText(setup, "copied");
+  await setup.waitForVisualIdle();
+  setup.renderer.destroy();
+});
+
+test("the full Changes tab retains fold and expand controls", async () => {
+  const setup = await testRender(
+    <GridTabContent
+      tab={changesTab()}
+      rows={rows}
+      surface={surface}
+      rejectedRows={new Set()}
+      fold={{
+        isCollapsed: () => false,
+        isExpanded: () => false,
+        canExpand: () => true,
+        onToggleCollapse: noop,
+        onToggleExpand: noop,
+        onCopyPath: () => true,
+      }}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />,
+    { width: 80, height: 12 },
+  );
+
+  await waitForText(setup, "src/store.txt");
+  const frame = setup.captureCharFrame();
+
+  expect(frame).toContain("src/store.txt");
+  expect(frame).not.toContain("v src/store.txt");
+  expect(frame).toContain(NERD.copy);
+  expect(frame).toContain("expand");
+  await setup.waitForVisualIdle();
+  setup.renderer.destroy();
+});
+
+test("the file title tooltip follows its collapse action", async () => {
+  function TestChanges(): React.ReactNode {
+    const [collapsed, setCollapsed] = React.useState(false);
+
+    return (
+      <TooltipProvider theme={DARK}>
+        <GridTabContent
+          tab={changesTab()}
+          rows={rows}
+          surface={surface}
+          rejectedRows={new Set()}
+          fold={{
+            isCollapsed: () => collapsed,
+            isExpanded: () => false,
+            canExpand: () => true,
+            onToggleCollapse: () => setCollapsed((current) => !current),
+            onToggleExpand: noop,
+            onCopyPath: () => true,
+          }}
+          dimmed={false}
+          readFile={async () => null}
+          onAddFileComment={noop}
+          theme={DARK}
+        />
+      </TooltipProvider>
+    );
+  }
+
+  const setup = await testRender(<TestChanges />, { width: 80, height: 12 });
+
+  await waitForText(setup, "src/store.txt");
+  const title = locateText(setup, "src/store.txt");
+
+  await setup.mockMouse.moveTo(title.column, title.row);
+  await waitForText(setup, "collapse");
+  await setup.mockMouse.click(title.column, title.row);
+  await waitForText(setup, "uncollapse");
+  await setup.mockMouse.click(title.column, title.row);
+  await waitForText(setup, "collapse");
+  expect(setup.captureCharFrame()).not.toContain("uncollapse");
+  setup.renderer.destroy();
+});

package/src/workbench/components/GridTabContent.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { DEFAULT_QUICK_ACTIONS } from "../../settings/config";
+import type { Story, StoryMeta } from "../../stories/story";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { fixtureDiffRows, fixtureDiffSession } from "../../stories/story-fixtures";
+import { changesTab, fileTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/GridTabContent" };
+
+const noop = (): void => {};
+
+function surface(): DiffSurfaceProps {
+  return {
+    session: fixtureDiffSession({ annotations: [] }),
+    quickActions: DEFAULT_QUICK_ACTIONS,
+    observer: false,
+    onAnnotate: noop,
+    onReply: noop,
+    onUpdateAnnotation: noop,
+    onExit: noop,
+  };
+}
+
+/** The whole-diff Changes tab: every changed file in one scroll container. */
+export const ChangesTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={changesTab()}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 80, height: 18 },
+};
+
+/** A single-file diff tab: that file's rows alone, indexed on their own. */
+export const FileDiffTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={fileTab("store.ts", "src/store.ts", "diff")}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 80, height: 18 },
+};

package/src/workbench/components/GridTabContent.tsx

@@ -0,0 +1,195 @@
+/**
+ * The body an editor tab paints: the whole working-tree/artifact diff for the
+ * Changes tab, or a single file's diff (or read-only contents) for a file tab.
+ * Shared by the thread workbench and the bare-launch shell so both render a
+ * changed file the same way, with comments routed back through one surface.
+ */
+
+import React, { useMemo } from "react";
+import { type Anchor } from "@cueloop/schema";
+import { dimmedTheme, type Theme } from "../../appearance/theme";
+import { changesMarks, type DiffRow } from "../../diff/view-diff";
+import {
+  DiffContentView,
+  type DiffFoldControls,
+  type DiffContentViewProps,
+} from "../../diff/components/DiffContentView";
+import { AnnotatableFileView } from "../../diff/components/AnnotatableFileView";
+import type { EditorTab } from "./editor-grid";
+
+/** The inline-commenting props the diff sheet shares with the thread view, wired once by the app. */
+export type DiffSurfaceProps = Pick<
+  DiffContentViewProps,
+  | "session"
+  | "quickActions"
+  | "observer"
+  | "commentsEnabled"
+  | "resolved"
+  | "suspended"
+  | "onComposingChange"
+  | "onObserverBlocked"
+  | "onCursorChange"
+  | "focusedAnnotationId"
+  | "onFocusAnnotation"
+  | "onAnnotate"
+  | "onReply"
+  | "onUpdateAnnotation"
+  | "isAnnotationReadOnly"
+  | "annotationAction"
+  | "onInvoke"
+  | "resolveAuthorLabel"
+  | "onNavCommand"
+  | "onExit"
+>;
+
+/** The Changes tab body: the whole diff in one scroll container, or a bare hint when nothing changed. */
+export function ChangesTabBody(props: {
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  showFileCollapse?: boolean;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  /** Rows the sibling Thread pane spends on its footer, so this empty hint centers level with it. */
+  emptyBottomPadding?: number;
+  theme: Theme;
+}): React.ReactNode {
+  const session = props.surface.session;
+  const marks = useMemo(
+    () => changesMarks(session, props.rows, props.surface.focusedAnnotationId),
+    [session, props.rows, props.surface.focusedAnnotationId],
+  );
+
+  if (props.rows.length === 0) {
+    return (
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingBottom: props.emptyBottomPadding,
+        }}
+      >
+        <text fg={props.theme.textDim}>No changes</text>
+      </box>
+    );
+  }
+
+  return (
+    <DiffContentView
+      rows={props.rows}
+      marks={marks}
+      {...props.surface}
+      rejectedRows={props.rejectedRows}
+      fold={props.fold}
+      showFileCollapse={props.showFileCollapse}
+      fileStats={props.fileStats}
+      split={props.split}
+      theme={props.dimmed ? dimmedTheme(props.theme) : undefined}
+    />
+  );
+}
+
+/** An editor tab's body: the whole diff for the Changes tab, a file's diff or contents for a file tab. */
+export function GridTabContent(props: {
+  tab: EditorTab;
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  readFile: (path: string) => Promise<string | null>;
+  /** Persist a comment on a project file; the file view built the anchor against its own lines. */
+  onAddFileComment: (path: string, anchor: Anchor, body: string) => void;
+  /** Rows the sibling Thread pane spends on its footer, so the empty hint centers level with it. */
+  emptyBottomPadding?: number;
+  theme: Theme;
+}): React.ReactNode {
+  const { tab } = props;
+
+  if (tab.kind === "file" && tab.fileView === "contents" && tab.path !== undefined) {
+    const filePath = tab.path;
+
+    return (
+      <AnnotatableFileView
+        path={filePath}
+        loadContents={props.readFile}
+        session={props.surface.session}
+        quickActions={props.surface.quickActions}
+        observer={props.surface.observer}
+        resolved={props.surface.resolved}
+        suspended={props.surface.suspended}
+        focusedAnnotationId={props.surface.focusedAnnotationId}
+        onFocusAnnotation={props.surface.onFocusAnnotation}
+        onComposingChange={props.surface.onComposingChange}
+        onCursorChange={props.surface.onCursorChange}
+        onObserverBlocked={props.surface.onObserverBlocked}
+        onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
+        onReply={props.surface.onReply}
+        onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        isAnnotationReadOnly={props.surface.isAnnotationReadOnly}
+        annotationAction={props.surface.annotationAction}
+        onInvoke={props.surface.onInvoke}
+        resolveAuthorLabel={props.surface.resolveAuthorLabel}
+        onExit={props.surface.onExit}
+        theme={props.theme}
+      />
+    );
+  }
+
+  if (tab.kind !== "file") {
+    return (
+      <ChangesTabBody
+        rows={props.rows}
+        surface={props.surface}
+        rejectedRows={props.rejectedRows}
+        fold={props.fold}
+        fileStats={props.fileStats}
+        split={props.split}
+        dimmed={props.dimmed}
+        emptyBottomPadding={props.emptyBottomPadding}
+        theme={props.theme}
+      />
+    );
+  }
+
+  // a single-file tab shows that file's rows alone, so its row indices are its own: comments and
+  // the caret report back in whole-diff indices; a single-file tab omits only the collapse action
+  const fileRowIndices = props.rows.flatMap((row, index) => (row.file === tab.path ? [index] : []));
+  const rows = fileRowIndices.map((index) => props.rows[index]!);
+  const wholeIndex = (rowIndex: number): number => fileRowIndices[rowIndex] ?? rowIndex;
+  const rejectedRows = new Set(
+    fileRowIndices.flatMap((index, rowIndex) => (props.rejectedRows.has(index) ? [rowIndex] : [])),
+  );
+
+  return (
+    <ChangesTabBody
+      rows={rows}
+      surface={{
+        ...props.surface,
+        onCursorChange: (rowIndex) => props.surface.onCursorChange?.(wholeIndex(rowIndex)),
+        onAnnotate: (span, body) =>
+          props.surface.onAnnotate(
+            {
+              start: { blockIndex: wholeIndex(span.start.blockIndex), char: span.start.char },
+              end: { blockIndex: wholeIndex(span.end.blockIndex), char: span.end.char },
+            },
+            body,
+          ),
+      }}
+      rejectedRows={rejectedRows}
+      fileStats={props.fileStats}
+      fold={props.fold}
+      showFileCollapse={false}
+      split={props.split}
+      dimmed={props.dimmed}
+      emptyBottomPadding={props.emptyBottomPadding}
+      theme={props.theme}
+    />
+  );
+}