@react-x11/components 0.3.0 → 0.5.0

package/src/maps/types.ts

@@ -0,0 +1,260 @@
+// The public vocabulary: what `<Map>` takes, what it hands back, and what
+// its events carry.
+//
+// Separate from `index.ts` for the reason `src/flow/types.ts` is: the
+// element, the component and the tests all name these, and a types module
+// with no runtime in it can be imported by any of them without dragging the
+// others in.
+import type { Style } from 'react-x11/style';
+import type { ReactNode, Ref } from 'react';
+
+import type { LngLat, LngLatBounds, MapCamera, TileId } from './proj.js';
+import type { MapSource } from './sources.js';
+import type { MapStyle } from './style.js';
+import type { MapMarker, MapOverlay } from './overlay.js';
+
+export type { LngLat, LngLatBounds, MapCamera };
+export type { MapSource, TileData, TileRequest } from './sources.js';
+export type { MapMarker, MapOverlay, OverlayPalette } from './overlay.js';
+export type {
+  MapStyle,
+  MapStyleLayer,
+  MapFilter,
+  FillLayer,
+  LineLayer,
+  CircleLayer,
+  SymbolLayer,
+  Zoomed,
+} from './style.js';
+
+/** Where a pointer event happened, in every space that could be wanted. */
+export interface MapPointerEvent {
+  /** Geographic. */
+  lngLat: LngLat;
+  /** Pane-local logical pixels. */
+  x: number;
+  y: number;
+  /** The marker under the pointer, when there was one. */
+  marker: MapMarker | null;
+  /** Modifier state, as the synthetic event reported it. */
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  metaKey: boolean;
+  /** `1` left, `2` middle, `3` right. */
+  button: number;
+}
+
+/** What one frame cost — for a performance HUD, and what
+ *  `scripts/bench/maps.ts` reads. */
+export interface MapFrameStats {
+  /** Milliseconds spent rasterizing tiles into their surfaces this frame.
+   *  Bounded by `rasterBudgetMs` except for the one run that crossed it. */
+  rasterMs: number;
+  /** …and compositing them, drawing the labels, overlays and markers. */
+  drawMs: number;
+  /** Tiles the cover asked for. */
+  tiles: number;
+  /** …of which were composited from their own finished surface. Under
+   *  `progressive` this also counts the half-drawn ones. */
+  ready: number;
+  /** …and how many were drawn from a coarser ancestor instead, scaled up.
+   *  What covers a hole while zooming *in*. */
+  fromAncestor: number;
+  /** …and how many from their finer descendants, scaled down. What covers
+   *  a hole while zooming *out*, where there is no ancestor to borrow. */
+  fromDescendant: number;
+  /** Tiles still to rasterize — non-zero means the map is still sharpening
+   *  and another frame is already scheduled. */
+  pending: number;
+  /** Labels placed, and labels drawn. */
+  labels: number;
+  /**
+   * Tiles in the cover whose load failed and are waiting on a retry.
+   *
+   * Here because a map whose tiles all fail looks exactly like a map that
+   * is still loading — an empty background and nothing else — and the
+   * difference is not something a user can see.
+   */
+  errors: number;
+  /** Bytes of rendered surfaces the cache is holding. */
+  surfaceBytes: number;
+  /**
+   * What this pass repainted, in device pixels, or `null` for a full one.
+   *
+   * The number to watch when a map looks busy: a frame that is only
+   * continuing a rasterization should claim almost nothing, because the
+   * tile being drawn is a second surface nobody is looking at. A run of
+   * full-pane damage while tiles are still landing means something is
+   * asking for repaints it does not need — which on a backend that paints
+   * many frames a second reads as flashing.
+   */
+  damage: { x: number; y: number; width: number; height: number } | null;
+  /** What the rasterizer did, summed over the tiles drawn this frame. */
+  draw: {
+    features: number;
+    vertices: number;
+    decimated: number;
+    culled: number;
+    batches: number;
+  };
+}
+
+/** Options for framing a box. */
+export interface FitBoundsOptions {
+  /** Logical pixels kept clear on every side. 24 by default. */
+  padding?: number;
+  maxZoom?: number;
+}
+
+/** The imperative surface, through `ref`. */
+export interface MapHandle {
+  getCamera(): MapCamera;
+  setCamera(camera: Partial<MapCamera>): void;
+  panBy(dx: number, dy: number): void;
+  zoomIn(step?: number): void;
+  zoomOut(step?: number): void;
+  zoomTo(zoom: number): void;
+  /** Frame a box. */
+  fitBounds(bounds: LngLatBounds, options?: FitBoundsOptions): void;
+  /** Frame every marker, or the ones named. */
+  fitMarkers(ids?: readonly string[], options?: FitBoundsOptions): void;
+  /** What the pane can see. `west > east` across the antimeridian. */
+  getBounds(): LngLatBounds;
+  /** Geography to pane-local logical pixels, and back. */
+  project(position: LngLat): { x: number; y: number };
+  unproject(x: number, y: number): LngLat;
+  /** The marker at a pane-local point, or null. */
+  markerAt(x: number, y: number): MapMarker | null;
+  /** Throw away every rendered tile — after a style edit an application
+   *  made in place, which the map cannot see. */
+  refresh(): void;
+  /** What the last frame cost. */
+  stats(): MapFrameStats | null;
+}
+
+/** What the `<mapview>` element takes. `<Map>` adds the uncontrolled
+ *  camera and the box around it. */
+export interface MapViewProps {
+  /**
+   * Where tiles come from, drawn in order — a basemap, then an overlay
+   * pyramid over it. Empty draws the style's background and nothing else,
+   * which is what a map with only markers on it wants.
+   */
+  sources?: readonly MapSource[];
+  /** How to draw them. Defaults to {@link shortbreadStyle} in the theme's
+   *  light or dark palette. */
+  mapStyle?: MapStyle;
+  /**
+   * The camera, controlled. Leave it out and the **element** owns it —
+   * which is not just a convenience: an element-owned camera means a pan is
+   * a blit and a claim, with no React render in the loop at all.
+   */
+  camera?: MapCamera;
+  /** Where an element-owned camera starts. Read once, at construction. */
+  defaultCamera?: MapCamera;
+  onCameraChange?: (camera: MapCamera) => void;
+  /** Fired when a gesture ends and the camera has settled — the moment to
+   *  fetch what is now on screen. */
+  onMoveEnd?: (camera: MapCamera) => void;
+  minZoom?: number;
+  maxZoom?: number;
+  markers?: readonly MapMarker[];
+  overlays?: readonly MapOverlay[];
+  onMapClick?: (event: MapPointerEvent) => void;
+  onMarkerClick?: (marker: MapMarker, event: MapPointerEvent) => void;
+  /**
+   * The marker under the pointer, or null when it left every marker.
+   *
+   * `event` is null for the leave that comes from the pointer leaving the
+   * map altogether: there is no position on the map to report, and
+   * inventing one would be worse than saying so.
+   */
+  onMarkerHover?: (
+    marker: MapMarker | null,
+    event: MapPointerEvent | null,
+  ) => void;
+  /** `false` freezes the camera: no drag, no wheel, no keys. The map still
+   *  draws and still reports clicks. */
+  interactive?: boolean;
+  /**
+   * Show a tile as it is drawn rather than when it is finished.
+   *
+   * `false` by default, which is what every other map client does: a tile
+   * appears whole, and until it does the coarser one already in the cache
+   * is scaled up in its place. `true` composites a tile's surface as soon
+   * as it exists — so a dense tile arrives as water, then landuse, then
+   * road casings, then roads, across a dozen frames — which is honest about
+   * what the renderer is doing and does not look like a map.
+   *
+   * The one thing the default costs is a transition that invalidates every
+   * surface at once: a `mapStyle` change, `refresh()`, or a display-scale
+   * change leaves no finished tile *and* no finished ancestor, so the map
+   * drops to its background colour until the new tiles land. `true` shows
+   * it repainting instead.
+   */
+  progressive?: boolean;
+  /**
+   * Milliseconds a frame may spend rasterizing tiles. 8 by default, which
+   * leaves the rest of a 60 Hz frame for everything else; a tile that takes
+   * longer than the budget is finished over the frames after it. `0`
+   * suspends rasterization, which is what a gesture does on its own.
+   */
+  rasterBudgetMs?: number;
+  /**
+   * Device pixels per logical pixel for the tile surfaces, if not the
+   * display's.
+   *
+   * Lowering it to 1 on a retina panel makes rasterization about 1.6×
+   * quicker and the basemap correspondingly softer; labels, markers and
+   * overlays are unaffected, since none of them goes through a tile
+   * surface. Worth having on a slow machine, and worth knowing about before
+   * reaching for it.
+   */
+  rasterScale?: number;
+  /** Bytes of rendered tile surfaces to keep. 128 MB by default. */
+  surfaceBudget?: number;
+  /**
+   * Vertices after which the rasterizer flushes its path. 12,000 by
+   * default.
+   *
+   * A real trade on X11, where a fill becomes one coverage-mask upload and
+   * a bigger path is fewer of them over the same pixels. It used to be a
+   * per-backend trade — `CGContextStrokePath` was quadratic in the number
+   * of subpaths, so the Cocoa backend wanted the opposite value and this
+   * element probed for it — and react-x11 2.6.1 chunks that stroke inside
+   * the backend instead (react-x11#457). Set it only with a profile in
+   * hand.
+   */
+  batchVertices?: number;
+  /** What the licence requires, drawn in the corner. Taken from the
+   *  sources when they carry one; `''` removes it, which is the
+   *  application saying it has put the attribution somewhere else. */
+  attribution?: string;
+  /** Called once per painted frame with what it cost. */
+  onFrame?: (stats: MapFrameStats) => void;
+  /**
+   * Called once per failed tile load, with whatever the source threw.
+   *
+   * Nothing is drawn for a failed tile, so without this a source that is
+   * misconfigured, rate-limited or down is indistinguishable from one that
+   * is slow. The tile is retried on a backoff (0.5 s doubling to 30 s), so
+   * this fires again for each retry rather than once and forever.
+   */
+  onTileError?: (error: unknown, tile: TileId & { sourceId: string }) => void;
+  style?: Style;
+  role?: string;
+  'aria-label'?: string;
+  'data-testname'?: string;
+  ref?: Ref<unknown>;
+}
+
+/** What `<Map>` takes. */
+export interface MapProps extends Omit<MapViewProps, 'ref'> {
+  ref?: Ref<MapHandle>;
+  /** Anything absolutely positioned over the map — a legend, a control
+   *  panel. Laid out as siblings of the drawn pane rather than inside it,
+   *  because a registered element paints its children *before* its own
+   *  drawing and anything inside would be painted over. */
+  children?: ReactNode;
+}

package/src/qml/containers.tsx

@@ -0,0 +1,380 @@
+// Containers: the positioners (bindings the Row installs on its children),
+// Repeater, Loader, and the scroll pair — Flickable over core's
+// `overflow: 'scroll'` box, ListView over Flickable with windowed
+// delegates: only the visible range (plus a buffer) is instantiated, and
+// scrolling moves the window.
+
+import { useEffect } from 'react';
+import type { ReactElement } from 'react';
+import type { ScrollableNode } from 'react-x11';
+
+import {
+  QmlInstance,
+  instantiateComponentDoc,
+  instantiateTemplate,
+  resolveComponentByPath,
+  type QmlTypeDef,
+} from './objects.js';
+import { renderQmlChildren, geometryStyle } from './react.js';
+import {
+  applyMotion,
+  captureNode,
+  hostNode,
+  initItem,
+  num,
+} from './view-utils.js';
+import { delegateExtras, resolveModel } from './models.js';
+import { warn } from './globals.js';
+
+// --- positioners -----------------------------------------------------------
+
+function positionerLayout(inst: QmlInstance): void {
+  const horizontal = inst.typeInfo.name === 'Row';
+  const main = horizontal ? 'x' : 'y';
+  const mainSize = horizontal ? 'width' : 'height';
+  const crossSize = horizontal ? 'height' : 'width';
+  for (const kid of inst.visualChildren()) {
+    kid.slot(main).setBinding(() => {
+      let pos = 0;
+      const spacing = num(inst.slot('spacing').get());
+      for (const prev of inst.visualChildren()) {
+        if (prev === kid) break;
+        if (prev.slot('visible').get() === false) continue;
+        pos += num(prev.slot(mainSize).get()) + spacing;
+      }
+      return pos;
+    });
+  }
+  const extent = (): number => {
+    let sum = 0;
+    let count = 0;
+    const spacing = num(inst.slot('spacing').get());
+    for (const kid of inst.visualChildren()) {
+      if (kid.slot('visible').get() === false) continue;
+      sum += num(kid.slot(mainSize).get());
+      count++;
+    }
+    return sum + spacing * Math.max(0, count - 1);
+  };
+  const crossExtent = (): number => {
+    let max = 0;
+    for (const kid of inst.visualChildren()) {
+      if (kid.slot('visible').get() === false) continue;
+      max = Math.max(max, num(kid.slot(crossSize).get()));
+    }
+    return max;
+  };
+  inst.slot(horizontal ? 'implicitWidth' : 'implicitHeight').setBinding(extent);
+  inst
+    .slot(horizontal ? 'implicitHeight' : 'implicitWidth')
+    .setBinding(crossExtent);
+}
+
+function positionerInit(inst: QmlInstance): void {
+  initItem(inst);
+  positionerLayout(inst);
+}
+
+// --- Repeater --------------------------------------------------------------
+
+interface RepeaterState {
+  items?: QmlInstance[];
+  revOff?: (() => void) | null;
+}
+
+function repeaterRebuild(inst: QmlInstance): void {
+  const parent = inst.parentInst;
+  const tpl = inst.templates.get('delegate');
+  if (!parent || !tpl) return;
+  const state = inst.state as RepeaterState;
+  for (const item of state.items ?? []) {
+    const at = parent.children.indexOf(item);
+    if (at >= 0) parent.children.splice(at, 1);
+    item.destroy();
+  }
+  const { rows } = resolveModel(inst.slot('model').peek());
+  const items = rows.map(
+    (_, index) =>
+      instantiateTemplate(tpl, parent, delegateExtras(rows, index)).inst,
+  );
+  const at = parent.children.indexOf(inst);
+  parent.children.splice(at + 1, 0, ...items);
+  state.items = items;
+  inst.slot('count').assign(items.length);
+  parent._structChanged();
+}
+
+function repeaterModelChanged(inst: QmlInstance): void {
+  const state = inst.state as RepeaterState;
+  state.revOff?.();
+  state.revOff = null;
+  const { revSlot } = resolveModel(inst.slot('model').peek());
+  if (revSlot) state.revOff = revSlot.watch(() => repeaterRebuild(inst));
+  repeaterRebuild(inst);
+}
+
+// --- Flickable -------------------------------------------------------------
+
+function FlickableView({ inst }: { inst: QmlInstance }): ReactElement {
+  const style = geometryStyle(inst);
+  style.overflow = 'scroll';
+  applyMotion(inst, style);
+  const cw = num(inst.slot('contentWidth').peek());
+  const ch = num(inst.slot('contentHeight').peek());
+  const cx = num(inst.slot('contentX').peek());
+  const cy = num(inst.slot('contentY').peek());
+  useEffect(() => {
+    const node = hostNode(inst) as ScrollableNode | null;
+    if (!node || typeof node.scrollTo !== 'function') return;
+    if (node.scrollX !== cx || node.scrollY !== cy)
+      node.scrollTo({ x: cx, y: cy });
+  }, [inst, cx, cy]);
+  return (
+    <box
+      ref={captureNode(inst)}
+      style={style}
+      onScroll={(ev: { scrollX: number; scrollY: number }) => {
+        inst.slot('contentX').assign(ev.scrollX);
+        inst.slot('contentY').assign(ev.scrollY);
+      }}
+    >
+      <box
+        style={{
+          position: 'relative',
+          width: cw || undefined,
+          height: ch || undefined,
+        }}
+      >
+        {renderQmlChildren(inst)}
+      </box>
+    </box>
+  );
+}
+
+// --- ListView --------------------------------------------------------------
+
+interface ListState {
+  items?: Map<number, QmlInstance>;
+  revOff?: (() => void) | null;
+  measuredWatch?: boolean;
+}
+
+function listViewInit(lv: QmlInstance): void {
+  initItem(lv);
+  const state = lv.state as ListState;
+  const items = new Map<number, QmlInstance>();
+  state.items = items;
+
+  const destroyItem = (i: number): void => {
+    const it = items.get(i);
+    if (!it) return;
+    const at = lv.children.indexOf(it);
+    if (at >= 0) lv.children.splice(at, 1);
+    it.destroy();
+    items.delete(i);
+  };
+
+  const update = (): void => {
+    if (lv.destroyed) return;
+    const tpl = lv.templates.get('delegate');
+    if (!tpl) return;
+    const { rows } = resolveModel(lv.slot('model').peek());
+    const spacing = num(lv.slot('spacing').peek());
+    const count = rows.length;
+    for (const i of [...items.keys()]) if (i >= count) destroyItem(i);
+    if (count === 0) {
+      lv.slot('contentHeight').assign(0);
+      lv._structChanged();
+      return;
+    }
+    const ensure = (i: number): QmlInstance => {
+      let it = items.get(i);
+      if (!it) {
+        it = instantiateTemplate(tpl, lv, delegateExtras(rows, i)).inst;
+        items.set(i, it);
+        lv.children.push(it);
+      }
+      return it;
+    };
+    const first = ensure(0);
+    if (!state.measuredWatch) {
+      state.measuredWatch = true;
+      first.slot('height').watch(update); // implicit sizes settle late
+    }
+    const h = num(first.slot('height').peek());
+    if (!h) {
+      // Nothing measurable yet: stack whatever heights the delegates say.
+      let y = 0;
+      for (let i = 0; i < count; i++) {
+        const it = ensure(i);
+        it.slot('y').assign(y);
+        y += num(it.slot('height').peek()) + spacing;
+      }
+      lv.slot('contentHeight').assign(Math.max(0, y - spacing));
+    } else {
+      // Uniform rows (the first row's height): window the range.
+      const stride = h + spacing;
+      const viewH = num(lv.slot('height').peek());
+      const cy = num(lv.slot('contentY').peek());
+      const buffer = Math.max(2, Math.ceil((viewH || stride) / stride));
+      const start = Math.max(0, Math.floor(cy / stride) - buffer);
+      const end = Math.min(
+        count - 1,
+        Math.ceil((cy + (viewH || stride)) / stride) + buffer,
+      );
+      for (const i of [...items.keys()]) {
+        if (i !== 0 && (i < start || i > end)) destroyItem(i);
+      }
+      for (let i = start; i <= end; i++)
+        ensure(i)
+          .slot('y')
+          .assign(i * stride);
+      first.slot('y').assign(0);
+      lv.slot('contentHeight').assign(count * stride - spacing);
+    }
+    lv._structChanged();
+  };
+
+  const fullRebuild = (): void => {
+    for (const i of [...items.keys()]) destroyItem(i);
+    state.measuredWatch = false;
+    update();
+  };
+  const modelChanged = (): void => {
+    state.revOff?.();
+    state.revOff = null;
+    const { revSlot } = resolveModel(lv.slot('model').peek());
+    if (revSlot) state.revOff = revSlot.watch(fullRebuild);
+    fullRebuild();
+  };
+
+  lv.slot('model').watch(modelChanged);
+  lv.slot('contentY').watch(update);
+  lv.slot('height').watch(update);
+  lv.slot('spacing').watch(fullRebuild);
+  modelChanged();
+}
+
+// --- Loader ----------------------------------------------------------------
+
+function loaderInit(ld: QmlInstance): void {
+  initItem(ld);
+  let child: QmlInstance | null = null;
+  const sync = (): void => {
+    if (child) {
+      const at = ld.children.indexOf(child);
+      if (at >= 0) ld.children.splice(at, 1);
+      child.destroy();
+      child = null;
+      ld.slot('item').assign(null);
+      ld.slot('implicitWidth').assign(0);
+      ld.slot('implicitHeight').assign(0);
+    }
+    const tpl = ld.templates.get('sourceComponent');
+    const sourcePath = String(ld.slot('source').peek() ?? '');
+    const active = ld.slot('active').peek() !== false;
+    let loaded: QmlInstance | null = null;
+    if (!ld.destroyed && active && tpl) {
+      loaded = instantiateTemplate(tpl, ld).inst;
+    } else if (!ld.destroyed && active && sourcePath) {
+      // `source: "widgets/Meter.qml"` — a component document through the
+      // resolver seam, relative to the document that names it.
+      const compDoc = resolveComponentByPath(ld.doc, sourcePath);
+      if (compDoc) {
+        loaded = instantiateComponentDoc(compDoc, ld.context, ld).inst;
+      } else {
+        warn(
+          `QML: Loader.source '${sourcePath}' did not resolve — ` +
+            (ld.doc.load
+              ? 'no such .qml file relative to this document.'
+              : 'pass a resolver (createFileResolver) to QmlView.'),
+        );
+      }
+    }
+    if (loaded) {
+      child = loaded;
+      const item = loaded;
+      ld.children.push(item);
+      ld.slot('item').assign(item.facade);
+      ld.slot('implicitWidth').setBinding(() => num(item.slot('width').get()));
+      ld.slot('implicitHeight').setBinding(() =>
+        num(item.slot('height').get()),
+      );
+      ld.emit('loaded');
+    }
+    ld._structChanged();
+  };
+  ld.slot('active').watch(sync);
+  ld.slot('source').watch(sync);
+  sync();
+}
+
+// --- the type definitions --------------------------------------------------
+
+export const containerTypes: Record<string, QmlTypeDef> = {
+  Row: {
+    extends: 'Item',
+    properties: { spacing: { default: 0 } },
+    init: positionerInit,
+    onStructure: positionerLayout,
+  },
+  Column: {
+    extends: 'Item',
+    properties: { spacing: { default: 0 } },
+    init: positionerInit,
+    onStructure: positionerLayout,
+  },
+
+  Repeater: {
+    nonVisual: true,
+    capture: 'delegate',
+    properties: { model: { default: 0 }, count: { default: 0 } },
+    init(inst) {
+      inst.slot('model').watch(() => repeaterModelChanged(inst));
+      repeaterModelChanged(inst);
+    },
+    dispose(inst) {
+      const state = inst.state as RepeaterState;
+      state.revOff?.();
+      for (const item of state.items ?? []) item.destroy();
+    },
+  },
+
+  Flickable: {
+    extends: 'Item',
+    view: FlickableView,
+    properties: {
+      contentWidth: { default: 0 },
+      contentHeight: { default: 0 },
+      contentX: { default: 0 },
+      contentY: { default: 0 },
+    },
+    init: initItem,
+  },
+
+  ListView: {
+    extends: 'Flickable',
+    capture: 'delegate',
+    properties: {
+      model: { default: 0 },
+      spacing: { default: 0 },
+    },
+    init: listViewInit,
+    dispose(lv) {
+      const state = lv.state as ListState;
+      state.revOff?.();
+    },
+  },
+
+  Loader: {
+    extends: 'Item',
+    capture: 'sourceComponent',
+    properties: {
+      active: { default: true },
+      item: { default: null },
+      source: { default: '' },
+    },
+    signals: { loaded: [] },
+    init: loaderInit,
+  },
+};

package/src/qml/controls.tsx

@@ -0,0 +1,47 @@
+// `import QtQuick.Controls` — the beginnings of the Controls story:
+// widgets react-x11 already ships, registered as QML types. The widgets
+// are passed in rather than imported here, so the family costs nothing
+// when Controls are unused and the app decides which widget set answers
+// (core's `Button`, or its own).
+
+import type { ComponentType } from 'react';
+import { registerQmlModule } from './objects.js';
+import { geometryStyle } from './react.js';
+import { str } from './view-utils.js';
+
+export interface ControlsWidgets {
+  /** A pressable taking `primary`, `disabled`, `onPress` and children —
+   * core's `Button` as it stands. Deliberately `ComponentType<any>`:
+   * React's `propTypes`/`defaultProps` members make component types
+   * near-invariant in their props, so a props-typed seam rejects any
+   * richer button; `any` is the honest edge (eslint does not see
+   * TypeScript here — AGENTS.md, "Linting").  */
+  Button: ComponentType<any>;
+}
+
+export function registerControls({ Button }: ControlsWidgets): void {
+  registerQmlModule('QtQuick.Controls', {
+    version: '2.0',
+    types: {
+      Button: {
+        extends: 'Item',
+        properties: {
+          text: { default: '' },
+          primary: { default: false },
+        },
+        signals: { clicked: [] },
+        view: ({ inst }) => (
+          <box style={geometryStyle(inst)}>
+            <Button
+              primary={inst.slot('primary').peek() === true}
+              disabled={inst.slot('enabled').peek() === false}
+              onPress={() => inst.emit('clicked')}
+            >
+              {str(inst.slot('text').peek())}
+            </Button>
+          </box>
+        ),
+      },
+    },
+  });
+}