tuiboard 0.5.4 → 0.6.0

package/src/store/timeline.test.ts

@@ -6,8 +6,10 @@ import {
   MINS_PER_ROW,
   TOTAL_ROWS,
   buildRowMap,
+  buildCalendarEntries,
   buildTimelineEntries,
   countOverlaps,
+  formatAgendaDay,
   formatHm,
   type TimelineEntry,
 } from "./timeline";
@@ -52,7 +54,7 @@ describe("buildTimelineEntries", () => {
 
   it("returns empty when no tasks are time-blocked today", () => {
     const t = makeTask({ displayTitle: "no time block", scheduled: today });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     expect(buildTimelineEntries([board], today)).toEqual([]);
   });
 
@@ -62,7 +64,7 @@ describe("buildTimelineEntries", () => {
       scheduled: today,
       timeBlock: { startMin: 9 * 60, endMin: 10 * 60 + 30 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     const entries = buildTimelineEntries([board], today);
     expect(entries.length).toBe(1);
     expect(entries[0]!.startMin).toBe(540);
@@ -80,7 +82,7 @@ describe("buildTimelineEntries", () => {
       scheduled: today,
       timeBlock: { startMin: 9 * 60, endMin: 10 * 60 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     const entries = buildTimelineEntries([board], today);
     expect(entries).toHaveLength(1);
     expect(entries[0]!.task.done).toBe(true);
@@ -92,7 +94,7 @@ describe("buildTimelineEntries", () => {
       scheduled: "2026-05-28",
       timeBlock: { startMin: 9 * 60, endMin: 10 * 60 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     expect(buildTimelineEntries([board], today)).toEqual([]);
   });
 
@@ -103,7 +105,7 @@ describe("buildTimelineEntries", () => {
       // 6:30-7:30 → only 7:00-7:30 visible (rows 0-1)
       timeBlock: { startMin: 6 * 60 + 30, endMin: 7 * 60 + 30 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     const entries = buildTimelineEntries([board], today);
     expect(entries.length).toBe(1);
     expect(entries[0]!.startRow).toBe(0); // clipped at top
@@ -115,7 +117,7 @@ describe("buildTimelineEntries", () => {
       scheduled: today,
       timeBlock: { startMin: 0, endMin: 30 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t]);
+    const board = makeBoard("Work", "work.md", [t]);
     expect(buildTimelineEntries([board], today)).toEqual([]);
   });
 
@@ -130,7 +132,7 @@ describe("buildTimelineEntries", () => {
       scheduled: today,
       timeBlock: { startMin: 9 * 60, endMin: 10 * 60 },
     });
-    const board = makeBoard("R3PLICA", "r3.md", [t1, t2]);
+    const board = makeBoard("Work", "work.md", [t1, t2]);
     const entries = buildTimelineEntries([board], today);
     expect(entries.map((e) => e.task.displayTitle)).toEqual([
       "morning",
@@ -142,9 +144,10 @@ describe("buildTimelineEntries", () => {
 describe("buildRowMap", () => {
   function entryAt(startRow: number, endRow: number, title = "block"): TimelineEntry {
     return {
+      kind: "task",
       ref: { boardPath: "x", columnIndex: 0, taskIndex: 0 },
       task: makeTask({ displayTitle: title }),
-      boardName: "R3PLICA",
+      boardName: "Work",
       boardIndex: 0,
       columnName: "Inbox",
       startMin: 0,
@@ -154,6 +157,9 @@ describe("buildRowMap", () => {
     };
   }
 
+  const titleOf = (e: TimelineEntry | undefined) =>
+    e?.kind === "task" ? e.task.displayTitle : undefined;
+
   it("returns TOTAL_ROWS row pairs", () => {
     const result = buildRowMap([], 0);
     expect(result.rows.length).toBe(TOTAL_ROWS);
@@ -190,13 +196,13 @@ describe("buildRowMap", () => {
     expect(overflow).toBe(0);
     // Lane 0 (left) gets A.
     expect(rows[5]!.left.kind).toBe("head");
-    expect(rows[5]!.left.entry?.task.displayTitle).toBe("A");
+    expect(titleOf(rows[5]!.left.entry)).toBe("A");
     // Lane 1 (right) gets B starting at row 7.
     expect(rows[7]!.right.kind).toBe("head");
-    expect(rows[7]!.right.entry?.task.displayTitle).toBe("B");
+    expect(titleOf(rows[7]!.right.entry)).toBe("B");
     // Row 10 is past A's end but inside B → left empty, right fill.
     expect(rows[10]!.left.kind).toBe("empty");
-    expect(rows[10]!.right.entry?.task.displayTitle).toBe("B");
+    expect(titleOf(rows[10]!.right.entry)).toBe("B");
   });
 
   it("counts third+ overlapping entry as overflow", () => {
@@ -214,8 +220,8 @@ describe("buildRowMap", () => {
     const c = entryAt(10, 15, "C");
     const { rows, overflow } = buildRowMap([a, c], 0);
     expect(overflow).toBe(0);
-    expect(rows[5]!.left.entry?.task.displayTitle).toBe("A");
-    expect(rows[10]!.left.entry?.task.displayTitle).toBe("C");
+    expect(titleOf(rows[5]!.left.entry)).toBe("A");
+    expect(titleOf(rows[10]!.left.entry)).toBe("C");
     // Right lane stayed empty throughout.
     for (let r = 0; r < TOTAL_ROWS; r++) {
       expect(rows[r]!.right.kind).toBe("empty");
@@ -239,6 +245,7 @@ describe("buildRowMap", () => {
 describe("countOverlaps", () => {
   function entry(s: number, e: number): TimelineEntry {
     return {
+      kind: "task",
       ref: { boardPath: "x", columnIndex: 0, taskIndex: 0 },
       task: makeTask({ displayTitle: "x" }),
       boardName: "X",
@@ -268,6 +275,50 @@ describe("countOverlaps", () => {
   });
 });
 
+describe("formatAgendaDay", () => {
+  it("uses relative words for the near days", () => {
+    expect(formatAgendaDay(0, "2026-05-30")).toBe("Today");
+    expect(formatAgendaDay(1, "2026-05-31")).toBe("Tomorrow");
+    expect(formatAgendaDay(-1, "2026-05-29")).toBe("Yesterday");
+  });
+
+  it("stamps weekday + day + month for farther days", () => {
+    // 2026-06-02 is a Tuesday.
+    expect(formatAgendaDay(3, "2026-06-02")).toBe("Tue 02 Jun");
+    // 2026-05-25 is a Monday.
+    expect(formatAgendaDay(-5, "2026-05-25")).toBe("Mon 25 May");
+  });
+});
+
+describe("buildCalendarEntries", () => {
+  const ev = (startMin: number, endMin: number, title = "Standup") => ({
+    title,
+    startMin,
+    endMin,
+    color: "#FF5F00",
+    source: "google" as const,
+  });
+
+  it("maps an in-window event to a calendar entry with rows", () => {
+    const out = buildCalendarEntries([ev(9 * 60, 10 * 60, "Standup")]);
+    expect(out).toHaveLength(1);
+    expect(out[0]!.kind).toBe("calendar");
+    expect(out[0]!.title).toBe("Standup");
+    expect(out[0]!.color).toBe("#FF5F00");
+    // 09:00 → (540 - DAY_START*60) / 15
+    expect(out[0]!.startRow).toBe((9 * 60 - DAY_START_HOUR * 60) / MINS_PER_ROW);
+  });
+
+  it("drops events entirely outside the rendered window", () => {
+    expect(buildCalendarEntries([ev(2 * 60, 3 * 60)])).toEqual([]);
+  });
+
+  it("sorts by start time", () => {
+    const out = buildCalendarEntries([ev(11 * 60, 12 * 60, "late"), ev(8 * 60, 9 * 60, "early")]);
+    expect(out.map((e) => e.title)).toEqual(["early", "late"]);
+  });
+});
+
 describe("formatHm", () => {
   it("zero-pads hours and minutes", () => {
     expect(formatHm(0)).toBe("00:00");

package/src/store/timeline.ts

@@ -25,12 +25,7 @@ export const TOTAL_ROWS =
 /** Minimum block height in rows — single-row blocks are unreadable. */
 export const MIN_BLOCK_ROWS = 2;
 
-export interface TimelineEntry {
-  ref: TaskRef;
-  task: Task;
-  boardName: string;
-  boardIndex: number;
-  columnName: string;
+interface BaseEntry {
   startMin: number;
   endMin: number;
   /** Vertical position in the row grid (clipped to [0, TOTAL_ROWS)). */
@@ -39,6 +34,46 @@ export interface TimelineEntry {
   endRow: number;
 }
 
+/** A time-blocked task placed on the grid. */
+export interface TaskTimelineEntry extends BaseEntry {
+  kind: "task";
+  ref: TaskRef;
+  task: Task;
+  boardName: string;
+  boardIndex: number;
+  columnName: string;
+}
+
+/** A read-only calendar event (Google / Microsoft) placed on the grid. */
+export interface CalTimelineEntry extends BaseEntry {
+  kind: "calendar";
+  title: string;
+  color: string;
+  source: "google" | "microsoft";
+}
+
+export type TimelineEntry = TaskTimelineEntry | CalTimelineEntry;
+
+/**
+ * Map an event's start/end (minutes since midnight) to grid rows, or null if
+ * it falls entirely outside the rendered [DAY_START_HOUR, DAY_END_HOUR] window.
+ */
+function rowsFor(
+  startMin: number,
+  endMin: number,
+): { startRow: number; endRow: number } | null {
+  const windowStart = DAY_START_HOUR * 60;
+  const windowEnd = DAY_END_HOUR * 60;
+  if (endMin <= windowStart || startMin >= windowEnd) return null;
+  const startRow = Math.floor((startMin - windowStart) / MINS_PER_ROW);
+  const naturalHeight = Math.max(
+    MIN_BLOCK_ROWS,
+    Math.floor((endMin - startMin) / MINS_PER_ROW),
+  );
+  const endRow = startRow + naturalHeight;
+  return { startRow: Math.max(0, startRow), endRow: Math.min(TOTAL_ROWS, endRow) };
+}
+
 export type RowKind = "empty" | "hour" | "head" | "body" | "fill" | "now";
 
 export interface RowMapEntry {
@@ -85,8 +120,8 @@ export interface BuildRowMapResult {
 export function buildTimelineEntries(
   boards: Board[],
   date: string,
-): TimelineEntry[] {
-  const out: TimelineEntry[] = [];
+): TaskTimelineEntry[] {
+  const out: TaskTimelineEntry[] = [];
   for (let bi = 0; bi < boards.length; bi++) {
     const board = boards[bi]!;
     for (let ci = 0; ci < board.columns.length; ci++) {
@@ -102,19 +137,11 @@ export function buildTimelineEntries(
         if (t.scheduled !== date) continue;
 
         const { startMin, endMin } = t.timeBlock;
-        const windowStart = DAY_START_HOUR * 60;
-        const windowEnd = DAY_END_HOUR * 60;
-        // Skip blocks that fall entirely outside the rendered window.
-        if (endMin <= windowStart || startMin >= windowEnd) continue;
-
-        const startRow = Math.floor((startMin - windowStart) / MINS_PER_ROW);
-        const naturalHeight = Math.max(
-          MIN_BLOCK_ROWS,
-          Math.floor((endMin - startMin) / MINS_PER_ROW),
-        );
-        const endRow = startRow + naturalHeight;
+        const rows = rowsFor(startMin, endMin);
+        if (!rows) continue; // entirely outside the rendered window
 
         out.push({
+          kind: "task",
           ref: {
             boardPath: board.filepath,
             columnIndex: ci,
@@ -126,8 +153,8 @@ export function buildTimelineEntries(
           columnName: col.name,
           startMin,
           endMin,
-          startRow: Math.max(0, startRow),
-          endRow: Math.min(TOTAL_ROWS, endRow),
+          startRow: rows.startRow,
+          endRow: rows.endRow,
         });
       }
     }
@@ -136,6 +163,32 @@ export function buildTimelineEntries(
   return out;
 }
 
+/**
+ * Turn read-only calendar events (already mapped to minutes-since-midnight for
+ * the target day) into grid entries, clipped to the rendered window.
+ */
+export function buildCalendarEntries(
+  events: Array<{ title: string; startMin: number; endMin: number; color: string; source: "google" | "microsoft" }>,
+): CalTimelineEntry[] {
+  const out: CalTimelineEntry[] = [];
+  for (const e of events) {
+    const rows = rowsFor(e.startMin, e.endMin);
+    if (!rows) continue;
+    out.push({
+      kind: "calendar",
+      title: e.title,
+      color: e.color,
+      source: e.source,
+      startMin: e.startMin,
+      endMin: e.endMin,
+      startRow: rows.startRow,
+      endRow: rows.endRow,
+    });
+  }
+  out.sort((a, b) => a.startMin - b.startMin);
+  return out;
+}
+
 /**
  * Place entries onto the TOTAL_ROWS grid, using up to 2 lanes to render
  * overlapping blocks side-by-side. A third+ overlapping block on the same
@@ -275,6 +328,26 @@ export function buildUnscheduledToday(
   return out;
 }
 
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = [
+  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+];
+
+/**
+ * Human label for the Agenda's viewed day. Relative words for the near days
+ * (Today / Tomorrow / Yesterday), else a "Mon 02 Jun" stamp. `dateIso` is the
+ * already-resolved date so this stays pure (no clock access).
+ */
+export function formatAgendaDay(offset: number, dateIso: string): string {
+  if (offset === 0) return "Today";
+  if (offset === 1) return "Tomorrow";
+  if (offset === -1) return "Yesterday";
+  const [y, m, d] = dateIso.split("-").map(Number);
+  const dt = new Date(y!, (m ?? 1) - 1, d ?? 1);
+  return `${WEEKDAYS[dt.getDay()]} ${String(d).padStart(2, "0")} ${MONTHS[(m ?? 1) - 1]}`;
+}
+
 /** Format minutes since midnight as "HH:MM". */
 export function formatHm(mins: number): string {
   const h = Math.floor(mins / 60) % 24;

package/src/ui/Modal.tsx

@@ -606,7 +606,10 @@ function HelpModal(props: { store: TuiStore }) {
         <span style={{ fg: T.text }}>{"  d                 Delete task (with confirm)\n"}</span>
         <span style={{ fg: T.text }}>{"  X                 Archive task → moves to Archive column\n"}</span>
         <span style={{ fg: T.text }}>{"  C                 Copy task to clipboard (markdown line)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nTimeline scheduling\n"}</span>
+        <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) day navigation\n"}</span>
+        <span style={{ fg: T.text }}>{"  [ / ]              Previous / next day (tasks + calendar events)\n"}</span>
+        <span style={{ fg: T.text }}>{"  \\                  Jump back to today\n"}</span>
+        <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) scheduling\n"}</span>
         <span style={{ fg: T.text }}>{"  c (any zone)       Toggle ARM MODE — then click a task, click a slot, repeat\n"}</span>
         <span style={{ fg: T.text }}>{"  click empty row    Place the armed task here (30-min block, or move if it has one)\n"}</span>
         <span style={{ fg: T.text }}>{"  click band         Arm an existing block (or place the armed task at its start)\n"}</span>

package/src/ui/TimelineView.tsx

@@ -36,13 +36,15 @@ import {
   onMount,
 } from "solid-js";
 
-import { isoToday, type TaskRef } from "~/store/index";
+import type { TaskRef } from "~/store/index";
 import {
   DAY_START_HOUR,
   MINS_PER_ROW,
   TOTAL_ROWS,
   buildRowMap,
+  buildCalendarEntries,
   buildTimelineEntries,
+  formatAgendaDay,
   formatHm,
   type RowMapEntry,
   type RowMapPair,
@@ -85,22 +87,40 @@ export function TimelineView(props: TimelineViewProps) {
   const armedRef = () => props.store.state.ui.armedTimelineRef;
   const armMode = () => props.store.state.ui.armMode;
 
+  // Which day the Agenda is showing (today + offset). Drives task entries,
+  // the calendar overlay, and the "now" line.
+  const viewedDate = () => props.store.agendaDate();
+  const isToday = () => props.store.state.ui.agendaOffset === 0;
+
+  // Task entries drive the cursor + arm/keyboard interactions.
   const entries = createMemo(() => {
     props.store.state.rev; // recompute on any board mutation
     return buildTimelineEntries(
       props.store.state.boards.map((b) => b.board),
-      isoToday(),
+      viewedDate(),
     );
   });
 
+  // Tell the calendar store which day to fetch whenever the viewed day changes.
+  createEffect(() => {
+    props.store.calendar.setActiveDate(viewedDate());
+  });
+
+  // Read-only calendar events (Google / Microsoft), merged into the grid for
+  // display only — not cursor-navigable, not editable.
+  const calEntries = createMemo(() =>
+    buildCalendarEntries(props.store.calendar.events()),
+  );
+
   // Recompute the row map every minute so the "now" marker stays current.
-  // No more sticky-unscheduled trimming — the unscheduled list lived at the
-  // top of the timeline and caused unsolvable flex-overlap with the grid
-  // scrollbox below it. Replaced by the global `C` (calendar-arm) shortcut:
-  // arm a task from the board / virtual panel, then click a timeline slot
-  // to place it. The grid now owns the whole panel, clean and simple.
+  // The now-line only renders on today's view (a sentinel hides it elsewhere).
   const nowMin = useNowMin();
-  const rowMap = createMemo(() => buildRowMap(entries(), nowMin()));
+  const rowMap = createMemo(() => {
+    const merged: TimelineEntry[] = [...entries(), ...calEntries()].sort(
+      (a, b) => a.startMin - b.startMin,
+    );
+    return buildRowMap(merged, isToday() ? nowMin() : -1);
+  });
 
   /** Find the armed entry in the current entries list (if still present). */
   const armedEntry = createMemo<TimelineEntry | undefined>(() => {
@@ -169,6 +189,14 @@ export function TimelineView(props: TimelineViewProps) {
   const onBlockClick = (entry: TimelineEntry, event: MouseEventLike) => {
     props.store.setActiveZone("timeline");
 
+    // Calendar events are read-only: they can't be armed or moved. A click on
+    // one while a task is armed just places the armed task at that slot;
+    // otherwise it's a no-op (beyond focusing the zone).
+    if (entry.kind !== "task") {
+      if (armedRef()) onEmptyRowClick(entry.startRow, event);
+      return;
+    }
+
     const arm = armedRef();
     const armedSame =
       !!arm &&
@@ -218,9 +246,10 @@ export function TimelineView(props: TimelineViewProps) {
       const startMin = Math.max(0, targetMin);
       const endMin = Math.min(24 * 60 - 1, startMin + DEFAULT_BLOCK_MIN);
       // A time block only renders on the timeline when the task is also
-      // scheduled for today — so arming a task from ANY board and dropping it
-      // here pins it to today (otherwise it'd vanish: block set, wrong date).
-      props.store.setScheduled(ref, isoToday());
+      // scheduled for the viewed day — so arming a task from ANY board and
+      // dropping it here pins it to whatever day the Agenda is showing
+      // (otherwise it'd vanish: block set, wrong date).
+      props.store.setScheduled(ref, viewedDate());
       props.store.setTimeBlock(ref, { startMin, endMin });
       props.store.flashBanner(
         "info",
@@ -278,7 +307,7 @@ export function TimelineView(props: TimelineViewProps) {
         paddingLeft: 1,
         paddingRight: 1,
       }}
-      title={`┤ Timeline · ${entries().length}${armMode() ? "  ◉ ARM" : ""} ├`}
+      title={`┤ Agenda · ${formatAgendaDay(props.store.state.ui.agendaOffset, viewedDate())} · ${entries().length}${armMode() ? "  ◉ ARM" : ""} ├`}
       titleAlignment="left"
     >
       <Show when={armMode()}>
@@ -306,6 +335,12 @@ export function TimelineView(props: TimelineViewProps) {
           </span>
         </text>
       </Show>
+      <Show when={!isToday()}>
+        <text wrapMode="none">
+          <span style={{ fg: T.warm }}>{"◷ "}</span>
+          <span style={{ fg: T.textDim }}>{"[ prev · ] next · \\ today"}</span>
+        </text>
+      </Show>
       <Show when={!armedTask() && rowMap().overflow > 0}>
         <text wrapMode="none">
           <span style={{ fg: T.bannerWarn }}>
@@ -416,8 +451,10 @@ function TimelineRow(props: TimelineRowProps) {
   const rightIsArmed = () =>
     !!props.armedEntry && right().entry === props.armedEntry;
 
-  const leftIsDone = () => !!left().entry?.task.done;
-  const rightIsDone = () => !!right().entry?.task.done;
+  const entryDone = (e: TimelineEntry | undefined) =>
+    e?.kind === "task" && e.task.done;
+  const leftIsDone = () => entryDone(left().entry);
+  const rightIsDone = () => entryDone(right().entry);
 
   // Cell budget per lane, so RowContent can tail-truncate the title (keeping
   // the head readable) instead of leaning on OpenTUI's middle-ellipsis.
@@ -563,6 +600,18 @@ function RowContent(props: RowContentProps) {
   }
   if (r.kind === "head" && r.entry) {
     const e = r.entry;
+    if (e.kind === "calendar") {
+      // Read-only calendar event: time + 📅, in the calendar's own color.
+      return (
+        <>
+          <span style={{ fg: T.textDim }}>{prefix}</span>
+          <span style={{ fg: e.color, attributes: ATTR.bold }}>
+            {"┤ "}{formatHm(e.startMin)}{"-"}{formatHm(e.endMin)}{" "}
+          </span>
+          <span style={{ fg: e.color }}>{"📅 "}</span>
+        </>
+      );
+    }
     const bColor = boardColor(e.boardIndex);
     const priorityGlyph = e.task.priority !== "none" ? "🔺 " : "";
     return (
@@ -590,11 +639,21 @@ function RowContent(props: RowContentProps) {
   }
   if (r.kind === "body" && r.entry) {
     const e = r.entry;
+    const avail = props.laneWidth ?? 200;
+    if (e.kind === "calendar") {
+      const budget = Math.max(6, avail - (props.skipPrefix ? 0 : 3) - 2);
+      return (
+        <>
+          <span style={{ fg: T.textDim }}>{prefix}</span>
+          <span style={{ fg: e.color }}>{"│ "}</span>
+          <span style={{ fg: e.color }}>{tailTruncate(e.title, budget)}</span>
+        </>
+      );
+    }
     const bColor = boardColor(e.boardIndex);
     // Tail-truncate so the START of the title stays readable (the head/tail
     // ellipsis OpenTUI does otherwise chops the middle). Budget = lane width
     // minus the prefix, the "│ " gutter, and the done check.
-    const avail = props.laneWidth ?? 200;
     const budget = Math.max(
       6,
       avail - (props.skipPrefix ? 0 : 3) - 2 - (e.task.done ? 2 : 0),
@@ -614,15 +673,15 @@ function RowContent(props: RowContentProps) {
   }
   if (r.kind === "fill" && r.entry) {
     const e = r.entry;
-    const bColor = boardColor(e.boardIndex);
+    const color = e.kind === "calendar" ? e.color : boardColor(e.boardIndex);
     const isLast = props.rowIndex === e.endRow - 1;
     return (
       <>
         <span style={{ fg: T.textDim }}>{prefix}</span>
-        <span style={{ fg: bColor }}>{isLast ? "╰" : "│"}</span>
+        <span style={{ fg: color }}>{isLast ? "╰" : "│"}</span>
         <Show when={isLast}>
           {/* Bottom edge of the block — clear visual cap. */}
-          <span style={{ fg: bColor }}>{"─".repeat(120)}</span>
+          <span style={{ fg: color }}>{"─".repeat(120)}</span>
         </Show>
       </>
     );