@cueloop/client 0.1.0-alpha.3 → 0.1.0-alpha.30

package/src/components/PlanSheet.tsx

@@ -0,0 +1,329 @@
+/**
+ * The plan document sheet: header chrome, the reconciliation banner, and the
+ * scrollable block flow. Each prose block renders as one natively wrapped
+ * text (wrapMode "word") beside a marker gutter, so wrapping is the
+ * renderer's job; the sheet keeps the rendered/work offset mapping per block
+ * and exposes an imperative selection surface - the keyboard span drives the
+ * native selection, and a mouse drag reads back as an exact work-text range,
+ * which keeps quote anchors char-precise.
+ */
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useRenderer } from "@opentui/react";
+import type { ScrollBoxRenderable, TextRenderable } from "@opentui/core";
+import type { ReviewSession } from "@cueloop/schema";
+import {
+  blockRuns,
+  displayText,
+  overlayMarks,
+  renderedOffsetFor,
+  revisionDelta,
+  workRangeForRendered,
+  type DisplayBlock,
+  type Mark,
+  type SpanState,
+  type StyleRun,
+} from "../view-plan";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { CodeBlock } from "./CodeBlock";
+import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export interface PlanSelection {
+  displayIndex: number;
+  start: number;
+  end: number;
+}
+
+export interface PlanSheetHandle {
+  /** Work-text range of the current native (mouse) selection, if any. */
+  readSelection(): PlanSelection | null;
+  /** Anchor/extend the renderer's native selection from keyboard span offsets. */
+  driveSpanSelection(span: SpanState): void;
+  clearSelection(): void;
+  revealBlock(displayIndex: number): void;
+}
+
+export interface PlanComposeState {
+  kind: "comment" | "suggestion";
+  displayIndex: number;
+  quote: string;
+  draft: AnnotationDraft;
+}
+
+export interface PlanSheetProps {
+  session: ReviewSession;
+  display: DisplayBlock[];
+  marks: Map<number, Mark[]>;
+  cursor: number;
+  /** Extra selection-style paint on one block (keyboard span or compose anchor). */
+  activeSpan: { displayIndex: number; start: number; end: number } | null;
+  compose: PlanComposeState | null;
+  editOrphanCount: number;
+  onLineActivate: (displayIndex: number) => void;
+  onEditRequest: () => void;
+  onShareRequest: () => void;
+  /** Owner-only: show the Edit and Share affordances. A share viewer never sees either. */
+  canEdit: boolean;
+  theme?: Theme;
+}
+
+interface BlockRef {
+  renderable: TextRenderable;
+  runs: StyleRun[];
+}
+
+/** Screen position of a rendered-text offset inside a wrapped text. */
+function positionOfRenderedOffset(renderable: TextRenderable, renderedOffset: number): { x: number; y: number } {
+  const info = renderable.lineInfo;
+  let lineIndex = 0;
+  for (let index = 0; index < info.lineStartCols.length; index++) {
+    if (info.lineStartCols[index]! <= renderedOffset) lineIndex = index;
+    else break;
+  }
+  return {
+    x: renderable.x + renderedOffset - (info.lineStartCols[lineIndex] ?? 0),
+    y: renderable.y + lineIndex,
+  };
+}
+
+export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function PlanSheet(
+  {
+    session,
+    display,
+    marks,
+    cursor,
+    activeSpan,
+    compose,
+    editOrphanCount,
+    onLineActivate,
+    onEditRequest,
+    onShareRequest,
+    canEdit,
+    theme,
+  }: PlanSheetProps,
+  handleRef,
+): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const blockRefs = useRef(new Map<number, BlockRef>());
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useImperativeHandle(handleRef, () => ({
+    readSelection: (): PlanSelection | null => {
+      if (!renderer?.hasSelection) return null;
+      const ordered = [...blockRefs.current.entries()].sort(([a], [b]) => a - b);
+      for (const [displayIndex, blockRef] of ordered) {
+        const selection = blockRef.renderable.getSelection();
+        if (!selection || selection.end <= selection.start) continue;
+        const range = workRangeForRendered(blockRef.runs, selection.start, selection.end);
+        if (range) return { displayIndex, ...range };
+      }
+      return null;
+    },
+    driveSpanSelection: (span: SpanState): void => {
+      if (!renderer) return;
+      const blockRef = blockRefs.current.get(span.displayIndex);
+      if (!blockRef) return;
+      const renderedStart = renderedOffsetFor(blockRef.runs, span.start);
+      const renderedEnd = renderedOffsetFor(blockRef.runs, span.end - 1);
+      if (renderedStart === null || renderedEnd === null) return;
+      const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
+      const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
+      renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
+      renderer.updateSelection(blockRef.renderable, endPosition.x + 1, endPosition.y);
+    },
+    clearSelection: (): void => {
+      renderer?.clearSelection();
+    },
+    revealBlock: (displayIndex: number): void => {
+      try {
+        scrollRef.current?.scrollChildIntoView(`plan-block-${displayIndex}`);
+      } catch {
+        // reveal is best-effort; selection state is already correct
+      }
+    },
+  }));
+
+  const registerBlock = (displayIndex: number, renderable: TextRenderable | null, runs: StyleRun[]): void => {
+    if (renderable) blockRefs.current.set(displayIndex, { renderable, runs });
+    else blockRefs.current.delete(displayIndex);
+  };
+  // stale refs must not survive a shrinking display list
+  useEffect(() => {
+    for (const displayIndex of blockRefs.current.keys()) {
+      if (displayIndex >= display.length) blockRefs.current.delete(displayIndex);
+    }
+  }, [display]);
+
+  const children: React.ReactNode[] = [];
+  for (let displayIndex = 0; displayIndex < display.length; displayIndex++) {
+    const block = display[displayIndex]!;
+    const isCursor = displayIndex === cursor;
+    const gap = topGap(display[displayIndex - 1], block);
+    if (block.kind === "code") {
+      children.push(
+        <CodeBlock
+          key={displayIndex}
+          id={`plan-block-${displayIndex}`}
+          language={(block.work ?? block.base)?.lang}
+          content={displayText(block)}
+          isCursor={isCursor}
+          marginTop={gap}
+          isAnnotated={(marks.get(displayIndex) ?? []).length > 0}
+          changeTag={block.type !== "same" ? tagLabel(block) : undefined}
+          theme={theme}
+        />,
+      );
+    } else {
+      const blockMarks = [...(marks.get(displayIndex) ?? [])];
+      if (activeSpan && activeSpan.displayIndex === displayIndex) {
+        blockMarks.push({ start: activeSpan.start, end: activeSpan.end, role: "kspan" });
+      }
+      const runs = overlayMarks(blockRuns(block, true), blockMarks);
+      // the change tag participates in the rendered text but carries no offsets
+      const mappedRuns: StyleRun[] =
+        block.type !== "same" ? [...runs, { text: ` [${tagLabel(block)}]`, role: "plain", start: null }] : runs;
+      children.push(
+        <box key={displayIndex} id={`plan-block-${displayIndex}`} style={{ flexDirection: "row", marginTop: gap }}>
+          <text selectable={false}>
+            <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
+            <span fg={tokens.textDim}>{marker(block)}</span>
+          </text>
+          <text
+            bg={isCursor ? tokens.cursorBg : undefined}
+            selectable
+            selectionBg={tokens.accent}
+            selectionFg={tokens.accentInk}
+            style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}
+            ref={(renderable: TextRenderable | null) => registerBlock(displayIndex, renderable, mappedRuns)}
+            onMouseUp={() => onLineActivate(displayIndex)}
+          >
+            {runs.map((run, runIndex) => (
+              <span key={runIndex} {...runStyle(run, block, tokens)}>
+                {run.text}
+              </span>
+            ))}
+            {block.type !== "same" ? <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span> : null}
+          </text>
+        </box>,
+      );
+    }
+    if (compose && compose.displayIndex === displayIndex) {
+      children.push(
+        <AnnotationCard key={`compose-${displayIndex}`} kind={compose.kind} quote={compose.quote} draft={compose.draft} theme={theme} />,
+      );
+    }
+  }
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <SheetHeader
+        session={session}
+        onEditRequest={onEditRequest}
+        onShareRequest={onShareRequest}
+        canEdit={canEdit}
+        theme={theme}
+      />
+      {editOrphanCount > 0 ? (
+        <box style={{ height: 1, backgroundColor: tokens.markCommentBg, paddingLeft: 2 }}>
+          <text fg={tokens.red}>
+            {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
+          </text>
+        </box>
+      ) : null}
+      <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }} focused={false}>
+        {children}
+      </scrollbox>
+    </box>
+  );
+});
+
+/** Sheet chrome: submitted-by + revision delta left, the Edit and Share word-buttons right. */
+function SheetHeader({
+  session,
+  onEditRequest,
+  onShareRequest,
+  canEdit,
+  theme,
+}: {
+  session: ReviewSession;
+  onEditRequest: () => void;
+  onShareRequest: () => void;
+  canEdit: boolean;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const revisionCount = session.revisions.length;
+  const previous = revisionCount > 1 ? session.revisions[revisionCount - 2] : undefined;
+  const delta = previous ? revisionDelta(previous.content, session.artifact.content) : null;
+  return (
+    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2, paddingRight: 1 }}>
+      <text fg={tokens.textDim}>
+        submitted by <span fg={tokens.textMuted}>{session.artifact.meta.agent ?? "unknown"}</span> · revision {revisionCount}
+        {delta ? (
+          <span fg={tokens.green}>
+            {" "}· v{revisionCount - 1}→v{revisionCount} +{delta.added} -{delta.removed}
+          </span>
+        ) : null}
+      </text>
+      <box style={{ flexGrow: 1 }} />
+      {canEdit && session.status !== "resolved" ? (
+        <Toolbar>
+          <Button onPress={onEditRequest} theme={theme}>
+            {" Edit "}
+          </Button>
+          <Button onPress={onShareRequest} theme={theme}>
+            {" Share "}
+          </Button>
+        </Toolbar>
+      ) : null}
+    </box>
+  );
+}
+
+/** Vertical rhythm: gaps live ABOVE blocks so boundaries never collapse. */
+function topGap(previous: DisplayBlock | undefined, current: DisplayBlock): number {
+  if (!previous) return 0;
+  const tightPair =
+    (current.kind === "li" && previous.kind === "li") || (current.kind === "oli" && previous.kind === "oli");
+  return tightPair ? 0 : 1;
+}
+
+function marker(block: DisplayBlock): string {
+  if (block.kind === "li") return "- ";
+  if (block.kind === "oli") return `${block.orderedItemNumber ?? 1}. `;
+  if (block.kind === "quote") return "▏ ";
+  return "";
+}
+
+function tagLabel(block: DisplayBlock): "cut" | "new" | "edited" {
+  return block.type === "del" ? "cut" : block.type === "add" ? "new" : "edited";
+}
+
+function tagColor(block: DisplayBlock, tokens: Theme): string {
+  return block.type === "del" ? tokens.red : block.type === "add" ? tokens.green : tokens.accent;
+}
+
+function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: string; bg?: string } {
+  const headingFg = block.kind === "h1" ? tokens.text : block.kind === "h2" || block.kind === "h3" ? tokens.accent : undefined;
+  const struck = block.type === "del";
+  switch (run.role) {
+    case "ins":
+      return { fg: tokens.insFg };
+    case "del":
+      return { fg: tokens.delFg };
+    case "mark-comment":
+      return { fg: tokens.text, bg: tokens.markCommentBg };
+    case "mark-suggestion":
+      return { fg: tokens.text, bg: tokens.markSuggestionBg };
+    case "mark-focus":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "kspan":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    default:
+      return { fg: struck ? tokens.red : (headingFg ?? tokens.text) };
+  }
+}

package/src/components/PromptDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PromptDialog } from "./PromptDialog";
+
+export const meta: StoryMeta = { title: "PromptDialog" };
+
+export const RenameAuthor: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Rename author "
+      label="Display name for this collaborator:"
+      value="Robin"
+      placeholder="their name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.backdrop, DARK.panel, DARK.accent],
+  size: { width: 64, height: 16 },
+};
+
+export const NameYourself: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Welcome "
+      label="Your name (optional) - it attributes the notes you leave:"
+      value=""
+      placeholder="your name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.backdrop, DARK.panel],
+  size: { width: 64, height: 16 },
+};

package/src/components/PromptDialog.tsx

@@ -0,0 +1,62 @@
+/**
+ * A centered single-field text prompt on the shared Dialog overlay. The focused
+ * input owns typing/cursor natively; the reducer's `prompt` overlay drives ⏎
+ * save / esc cancel (like the composer). Used to rename an author and to ask a
+ * collaborator for their name.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+// ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
+const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface PromptDialogProps {
+  isOpen: boolean;
+  title?: string;
+  label: string;
+  value: string;
+  placeholder?: string;
+  onInput: (text: string) => void;
+  theme?: Theme;
+}
+
+export function PromptDialog({ isOpen, title, label, value, placeholder, onInput, theme }: PromptDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  useEffect(() => {
+    // open with the caret after the seeded value, like a text field
+    if (inputRef.current) inputRef.current.cursorOffset = value.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!isOpen) return null;
+  return (
+    <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>{label}</text>
+        <textarea
+          ref={inputRef}
+          focused
+          initialValue={value}
+          placeholder={placeholder}
+          keyBindings={PROMPT_KEY_BINDINGS}
+          onContentChange={() => onInput(inputRef.current?.plainText ?? "")}
+          style={{
+            height: 1,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>⏎ save · esc cancel</text>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/ReviewPanel.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { DARK } from "../theme";
+import { REVIEW_MAX_WIDTH, REVIEW_MIN_WIDTH } from "../review-panel";
+import type { Story, StoryMeta } from "./story";
+import { ReviewPanel } from "./ReviewPanel";
+import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "ReviewPanel" };
+
+const rail = {
+  session: fixturePlanSession(),
+  authorNames: {},
+  selectedId: FIXTURE_ANNOTATIONS[0]!.id,
+  resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),
+  railTab: "review" as const,
+  pendingCount: 2,
+  cardEdit: null,
+  submitConfirm: null,
+  onTabChange: () => {},
+  onSelectCard: () => {},
+  onActivateCard: () => {},
+  onSubmitRequest: () => {},
+};
+
+const panelCallbacks = { onDividerGrab: () => {}, onToggle: () => {} };
+
+/** The plan area to the left of the divider, so the layout reads in context. */
+function PanelFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", width: "100%", height: "100%", backgroundColor: DARK.bg }}>
+      <box style={{ flexGrow: 1, paddingLeft: 1 }}>
+        <text fg={DARK.textMuted}>The plan takes the width the panel hands back.</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export const ExpandedNarrow: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.panel, DARK.border],
+  size: { width: 80, height: 24 },
+};
+
+export const ExpandedWide: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.panel, DARK.green],
+  size: { width: 90, height: 24 },
+};
+
+/** Dragging accents the divider glyph column. */
+export const DraggingDivider: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={34} height={24} dragging={true} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 24 },
+};
+
+export const Compact: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="compact" width={34} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent, DARK.green],
+  size: { width: 60, height: 24 },
+};
+
+export const Hidden: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="hidden" width={34} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  size: { width: 60, height: 24 },
+};

package/src/components/ReviewPanel.tsx

@@ -0,0 +1,116 @@
+/**
+ * The review surface's outer shell: the grabbable divider plus the rail in one
+ * of three modes - expanded (the full ReviewRail, resizable), compact (a narrow
+ * count + dots strip that hands width back to the plan), or hidden (nothing at
+ * all, no leftover tab). The keybinding cycles all three; the clickable chevron
+ * toggles expanded and compact only. App owns the width/mode state and the drag
+ * on the container; this file only reads them. The geometry (width clamp, the
+ * divider glyph column, the cycle) lives in review-panel.ts so this stays
+ * declarative.
+ */
+
+import React from "react";
+import type { Annotation } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { ReviewRail, type ReviewRailHandle, type ReviewRailProps } from "./ReviewRail";
+import { REVIEW_COMPACT_WIDTH, reviewRowsToDivider, type ReviewPanelMode } from "../review-panel";
+
+export interface ReviewPanelProps {
+  mode: ReviewPanelMode;
+  /** Expanded-rail width in columns (already clamped by the app). */
+  width: number;
+  /** Rows for the divider glyph column - the height of the plan/rail row. */
+  height: number;
+  /** Accent the divider while a drag is live. */
+  dragging: boolean;
+  /** Arm a divider drag; the app tracks the drag itself on the container. */
+  onDividerGrab: () => void;
+  /** Chevron click: expanded <-> compact (never hidden). */
+  onToggle: () => void;
+  /** The expanded ReviewRail's props; width and onCollapse are supplied here. */
+  rail: Omit<ReviewRailProps, "width" | "onCollapse" | "theme">;
+  railRef?: React.Ref<ReviewRailHandle>;
+  theme?: Theme;
+}
+
+/** A single-column stack of `│`, accent while dragging. Grabbing arms a drag. */
+function ReviewDivider({
+  dragging,
+  rows,
+  onGrab,
+  theme,
+}: {
+  dragging: boolean;
+  rows: number;
+  onGrab: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ width: 1 }} onMouseDown={onGrab}>
+      <text fg={dragging ? tokens.accent : tokens.border}>{reviewRowsToDivider(rows)}</text>
+    </box>
+  );
+}
+
+/** The compact strip: the card count, one kind-colored dot per card, and the
+ *  `«` chevron left-bound to match the expanded `»` gap. */
+function CompactRail({
+  annotations,
+  onExpand,
+  theme,
+}: {
+  annotations: Annotation[];
+  onExpand: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const dotColor = (annotation: Annotation): string =>
+    annotation.kind === "suggestion" ? tokens.green : tokens.accent;
+  return (
+    <box
+      style={{ width: REVIEW_COMPACT_WIDTH, backgroundColor: tokens.panel, flexDirection: "column", paddingTop: 1 }}
+    >
+      <box style={{ alignItems: "center" }}>
+        <text fg={tokens.accent}>{String(annotations.length)}</text>
+      </box>
+      <box style={{ height: 1 }} />
+      <box style={{ flexDirection: "column", alignItems: "center" }}>
+        {annotations.map((annotation) => (
+          <text key={annotation.id} fg={dotColor(annotation)}>
+            ●
+          </text>
+        ))}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ paddingLeft: 1 }} onMouseUp={onExpand}>
+        <text fg={tokens.textDim}>«</text>
+      </box>
+    </box>
+  );
+}
+
+export function ReviewPanel({
+  mode,
+  width,
+  height,
+  dragging,
+  onDividerGrab,
+  onToggle,
+  rail,
+  railRef,
+  theme,
+}: ReviewPanelProps): React.ReactNode {
+  if (mode === "hidden") return null;
+  return (
+    <>
+      <ReviewDivider dragging={dragging} rows={height} onGrab={onDividerGrab} theme={theme} />
+      {mode === "expanded" ? (
+        <ReviewRail ref={railRef} {...rail} width={width} onCollapse={onToggle} theme={theme} />
+      ) : (
+        <CompactRail annotations={rail.session.annotations} onExpand={onToggle} theme={theme} />
+      )}
+    </>
+  );
+}