@eocrm/design-system 0.6.24 → 0.8.0

package/src/components/DashboardCanvas/DashboardCanvas.tsx

@@ -1,1270 +0,0 @@
-import { Fragment, forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
-import type {
-  FocusEvent as ReactFocusEvent,
-  HTMLAttributes,
-  KeyboardEvent as ReactKeyboardEvent,
-  PointerEvent as ReactPointerEvent,
-  ReactNode,
-} from 'react';
-import clsx from 'clsx';
-import { useTranslation } from '../../i18n/useTranslation';
-import { Accordion } from '../Accordion';
-import type { CollapseBreakpoint } from '../_internal/collapse';
-import { overlayStack, useFloatingSurface } from '../_internal/overlay';
-import { mergeAriaDescribedby, mergeRefs, sanitizeId } from '../_internal/refs';
-import {
-  DASHBOARD_COLUMNS,
-  applyMove,
-  applyResize,
-  cellFromPoint,
-  clampGhost,
-  insertionCell,
-  reorderSection,
-  toggleSection,
-} from './engine';
-import type {
-  ContainerRef,
-  DashboardCanvasValue,
-  DashboardItemConstraints,
-  DashboardPlacement,
-} from './engine';
-import { DashboardCanvasItem, sortByPosition } from './DashboardCanvasItem';
-import type { CanvasGestures, ResizeEdge } from './DashboardCanvasItem';
-import { DashboardCanvasSection } from './DashboardCanvasSection';
-import styles from './DashboardCanvas.module.scss';
-
-/**
- * Per-item size constraints lookup passed to {@link DashboardCanvas}. Either a
- * plain record keyed by item id, or a function for computed/dynamic limits.
- * An item with no entry (and no matching key) gets `minW: 1`, `minH: 1`, no
- * `maxH`.
- */
-export type DashboardCanvasConstraintsProp =
-  | Record<string, DashboardItemConstraints>
-  | ((id: string | number) => DashboardItemConstraints | undefined);
-
-export interface DashboardCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /**
-   * The controlled layout: top-level items plus an ordered array of
-   * collapsible sections. `DashboardCanvas` never mutates this value — every
-   * change flows out through `onChange`.
-   */
-  value: DashboardCanvasValue;
-  /**
-   * Fires once per completed gesture — a drop, a resize end, a collapse
-   * toggle, a section reorder, or a cross-container move — with the whole
-   * next `value`. Omit for a read-only or fully static canvas; without it,
-   * drags preview live but nothing persists on drop.
-   */
-  onChange?: (next: DashboardCanvasValue) => void;
-  /**
-   * Renders the body of an item by id. Called for every item on every
-   * render — including items inside a COLLAPSED section (its body stays
-   * mounted and `inert`, not unmounted, so Accordion's own collapse
-   * animation has real content to animate) — and once more for the dragged
-   * item mid-gesture (the cursor-following ghost). Keep it pure; a widget
-   * that fetches on mount pays that cost even while its section is
-   * collapsed. The cell itself is a bare positioned box with no
-   * background/border/radius/shadow of its own and no minimum height beyond
-   * its `h` row-span — that chrome belongs here, in whatever this returns
-   * (typically a `<Card>`); size the content to the cell, or accept that a
-   * shorter widget in a taller cell shows bare (dotted, in edit mode) space
-   * below it.
-   */
-  renderItem: (id: string | number) => ReactNode;
-  /**
-   * Optional extra controls in a section's header (a title editor, a
-   * `DropdownMenu` trigger) rendered by section id, to the right of the
-   * title. Keep it small — the header row is not a general-purpose toolbar.
-   * Pointer presses inside the slot never start a band-reorder drag.
-   */
-  renderSectionHeader?: (id: string | number) => ReactNode;
-  /**
-   * Id of a section whose band to highlight (scrolls into view, then a ring
-   * with outward waves, same as `Highlight`) — e.g. a section the user just added. Collapsed bands
-   * highlight too. Does not move focus. Clear it in `onSectionHighlightDone`;
-   * setting the same id again after that re-triggers.
-   */
-  highlightedSectionId?: string | number;
-  /** Fires once the highlight run on `highlightedSectionId` has finished. */
-  onSectionHighlightDone?: () => void;
-  /** Per-item size constraints, consulted when clamping resize gestures. */
-  constraints?: DashboardCanvasConstraintsProp;
-  /**
-   * Column count of every container grid (top level and each section's
-   * sub-grid). All placement/resize bounds clamp against it. Minimum 1;
-   * fractional or sub-1 values are the consumer's bug, not validated.
-   *
-   * Layouts are NOT converted between column counts — a `value` saved at one
-   * `columns` renders at half width when the count doubles. Schemas written
-   * for the earlier 12-column grid (e.g. the eocrm layout-v2 spec) either
-   * pass `columns={12}` to match, or migrate their saved placements to 24.
-   * @default 24
-   */
-  columns?: number;
-  /**
-   * Container width at (inclusive) and below which every container grid
-   * re-templates to one column and pointer + keyboard editing turns off:
-   * `sm` 480px / `md` 640px / `lg` 768px, measured against the canvas's OWN
-   * width (container query), not the viewport. Section collapse toggles keep
-   * working at any width. @default 'md'
-   */
-  stackBelow?: CollapseBreakpoint;
-  /**
-   * View-only mode: identical geometry, but no drag/resize wiring, no resize
-   * handles, and no keyboard editing — the canvas renders `value` and lets
-   * section collapse toggles keep working. The canvas also disables editing
-   * on its own, without this prop, once its own width drops to or below the
-   * `stackBelow` breakpoint (single-column stack) — `readOnly` is for a
-   * consumer-chosen view mode, the width gate is automatic. @default false
-   */
-  readOnly?: boolean;
-}
-
-const TOP_CONTAINER: ContainerRef = { kind: 'top' };
-
-/** Per-breakpoint stack class (#318 pattern) — gates the @container step rules. */
-const stackClass: Record<CollapseBreakpoint, string> = {
-  sm: styles.stackSm,
-  md: styles.stackMd,
-  lg: styles.stackLg,
-};
-
-/** Stable registry key for a container (object identity is per-render). */
-function containerKey(cref: ContainerRef): string {
-  return cref.kind === 'top' ? 'top' : `s:${String(cref.id)}`;
-}
-
-/** The items of one container within a value (engine's private lookup, re-derived). */
-function itemsOf(value: DashboardCanvasValue, cref: ContainerRef): DashboardPlacement[] {
-  return (
-    (cref.kind === 'top'
-      ? value.items
-      : value.sections.find((section) => section.id === cref.id)?.items) ?? []
-  );
-}
-
-/**
- * A collapsed section's body is never a drop target — its `Accordion.Content`
- * stays mounted (CSS height animation, not a DOM unmount) so this must be
- * checked explicitly rather than relying on the container being unregistered.
- */
-function isCollapsedSection(value: DashboardCanvasValue, cref: ContainerRef): boolean {
-  return cref.kind === 'section' && !!value.sections.find((s) => s.id === cref.id)?.collapsed;
-}
-
-/** Last occupied row end (max `y + h`) of a container, `excludeId` left out. */
-function bottomOf(
-  value: DashboardCanvasValue,
-  cref: ContainerRef,
-  excludeId?: string | number,
-): number {
-  return itemsOf(value, cref).reduce(
-    (max, p) => (p.id === excludeId ? max : Math.max(max, p.y + p.h)),
-    0,
-  );
-}
-
-/**
- * Screen-px a pointer must travel before a press arms as a drag (Sortable's
- * activation-distance precedent) — presses and clicks inside item bodies and
- * section headers pass through untouched below it.
- */
-const DRAG_ACTIVATION_PX = 5;
-
-/**
- * Fallback row unit when `grid-auto-rows` doesn't resolve to a px length
- * (jsdom, where the square-cell `cqw` calc in `--dashboard-canvas-row` never
- * evaluates). Mirrors `--dashboard-canvas-row-stacked` (`--space-12`, 48px).
- */
-const FALLBACK_ROW_PX = 48;
-
-/**
- * Editing-gate width thresholds (px) — JS mirror of the `@container
- * dashboard-canvas (max-width: …)` step rules in DashboardCanvas.module.scss
- * (`_internal/collapse.scss` constants). `max-width` is INCLUSIVE, so a width
- * exactly at the threshold already single-columns — the gate below must match
- * with `<=`, not `<`. SCSS constants aren't readable from TS, so these
- * literals and those are kept in sync by hand, same as the
- * `FALLBACK_ROW_PX`/`--dashboard-canvas-row-stacked` pairing above.
- */
-const STACK_GATE_PX: Record<CollapseBreakpoint, number> = { sm: 480, md: 640, lg: 768 };
-
-/** Live px geometry of one container grid, re-measured per pointermove. */
-function measureGrid(el: HTMLElement, columns: number) {
-  const rect = el.getBoundingClientRect();
-  const style = getComputedStyle(el);
-  const gap = Number.parseFloat(style.columnGap) || 0;
-  const rowHeight = Number.parseFloat(style.gridAutoRows) || FALLBACK_ROW_PX;
-  const colWidth = (rect.width - gap * (columns - 1)) / columns;
-  return { rect, colWidth, rowHeight, gap };
-}
-
-/**
- * Capture always targets the ROOT: item elements REMOUNT when a preview moves
- * them across containers, and a remount implicitly releases their capture —
- * the pointerup would then never arrive and the drag would stick (FlowCanvas
- * root-capture precedent). jsdom throws on inactive pointers, hence the guard.
- */
-function capturePointer(el: Element | null, pointerId: number) {
-  try {
-    el?.setPointerCapture(pointerId);
-  } catch {
-    /* jsdom */
-  }
-}
-
-/**
- * Portal roots of the stack-registered blocking overlays (Modal / Drawer /
- * Lightbox — the ones that inert the background). A canvas inside one of
- * these is that overlay's CONTENT and keeps editing while it's open; a canvas
- * outside all of them is background whenever the stack is non-empty (#362).
- */
-const OVERLAY_HOST_SELECTOR =
-  '[data-modal-portal-root], [data-drawer-portal-root], [data-lightbox-portal-root]';
-
-// In-flight gesture bookkeeping lives in a ref (FlowCanvas precedent): the
-// pointer stream mutates it without re-render churn; `live` state below is
-// the render-facing projection, discarded wholesale on cancel.
-interface MoveDrag {
-  kind: 'move';
-  pointerId: number;
-  id: string | number;
-  from: ContainerRef;
-  homeX: number;
-  homeY: number;
-  startX: number;
-  startY: number;
-  /** Pointer offset inside the item at pointerdown — keeps the ghost under the grab point. */
-  grabDX: number;
-  grabDY: number;
-  ghostW: number;
-  ghostH: number;
-  moved: boolean;
-  target: ContainerRef;
-  targetKey: string;
-  cell: { x: number; y: number } | null;
-  previewKey: string | null;
-  preview: DashboardCanvasValue | null;
-}
-interface ResizeDrag {
-  kind: 'resize';
-  pointerId: number;
-  id: string | number;
-  container: ContainerRef;
-  containerKey: string;
-  edge: ResizeEdge;
-  startX: number;
-  startY: number;
-  startW: number;
-  startH: number;
-  lastW: number;
-  lastH: number;
-  preview: DashboardCanvasValue | null;
-}
-interface SectionDrag {
-  kind: 'section';
-  pointerId: number;
-  id: string | number;
-  fromIndex: number;
-  startX: number;
-  startY: number;
-  moved: boolean;
-  /** Insertion slot among ALL bands (0..N), indicator position. */
-  slot: number;
-}
-type DragState = MoveDrag | ResizeDrag | SectionDrag;
-
-/**
- * Keyboard pick-up state (Enter/Space on a focused item). `x`/`y` track the
- * REQUESTED cell exactly like a pointer drag tracks the cursor cell — the
- * engine's compaction may render the item elsewhere, but requested tracking
- * is what lets repeated ArrowDown presses tunnel past the compaction pull
- * and reach the next container. Committed via the same applyMove call and
- * `commit` choke point as the pointer path.
- */
-interface KeyboardPick {
-  id: string | number;
-  from: ContainerRef;
-  homeX: number;
-  homeY: number;
-  /** Item dims, for clamping the requested x against the columns bound. */
-  w: number;
-  container: ContainerRef;
-  x: number;
-  y: number;
-  /** Engine preview of dropping right now — the rendered layout while picked. */
-  preview: DashboardCanvasValue;
-}
-
-/** Render-facing gesture projection: the engine preview IS the rendered layout. */
-type LiveState =
-  | {
-      kind: 'move';
-      id: string | number;
-      value: DashboardCanvasValue;
-      /** Dragged item's row span — sizes the trailing drop space. */
-      h: number;
-      /** `containerKey` of the hovered drop target — only it gets the trailing space. */
-      target: string;
-      /** Canvas-relative px box for the cursor-following ghost. */
-      ghost: { left: number; top: number; width: number; height: number };
-    }
-  | { kind: 'resize'; id: string | number; value: DashboardCanvasValue }
-  | { kind: 'section'; id: string | number; slot: number };
-
-/**
- * Datadog-style 2D snap-grid dashboard: draggable, resizable items and collapsible sections on a configurable-column grid. Always controlled.
- * @see docs/components/DashboardCanvas.md
- */
-export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
-  function DashboardCanvas(
-    {
-      value,
-      onChange,
-      renderItem,
-      renderSectionHeader,
-      highlightedSectionId,
-      onSectionHighlightDone,
-      constraints,
-      columns = DASHBOARD_COLUMNS,
-      stackBelow = 'md',
-      readOnly = false,
-      className,
-      style,
-      'aria-describedby': ariaDescribedby,
-      onPointerMove: onPointerMoveProp,
-      onPointerUp: onPointerUpProp,
-      onPointerCancel: onPointerCancelProp,
-      onLostPointerCapture: onLostPointerCaptureProp,
-      onBlur: onBlurProp,
-      ...rest
-    },
-    ref,
-  ) {
-    const t = useTranslation();
-
-    const rootRef = useRef<HTMLDivElement | null>(null);
-    const containersRef = useRef(new Map<string, { el: HTMLElement; cref: ContainerRef }>());
-    const bandsRef = useRef(new Map<string | number, HTMLElement>());
-    const dragRef = useRef<DragState | null>(null);
-    const [live, setLive] = useState<LiveState | null>(null);
-    const [pick, setPick] = useState<KeyboardPick | null>(null);
-    // Below-md editing gate. Starts wide: jsdom has no ResizeObserver, and a
-    // freshly-mounted (possibly still-hidden) root reports 0 width — both
-    // stay wide so existing gesture tests keep exercising the full surface
-    // (FlowCanvas's "no RO / zero size -> untrustworthy" precedent).
-    const [isNarrow, setIsNarrow] = useState(false);
-    const editingEnabled = !readOnly && !isNarrow;
-    const uid = sanitizeId(useId());
-    const instructionsId = `dashboard-instructions-${uid}`;
-
-    // Nonce-keyed live region (FlowCanvas precedent): the nonce forces a DOM
-    // mutation for back-to-back identical messages, and keys a child <span>
-    // so the region node itself stays stable across announcements.
-    const [announcement, setAnnouncement] = useState({ text: '', nonce: 0 });
-    const announce = useCallback(
-      (message: string) => setAnnouncement((prev) => ({ text: message, nonce: prev.nonce + 1 })),
-      [],
-    );
-
-    // A keyboard step can remount or DOM-reorder the focused element (a
-    // cross-container move re-parents the item; a band reorder re-orders the
-    // section nodes), silently dropping focus to <body> and stranding the
-    // keyboard user. Handlers flag what to re-focus; the post-commit effect
-    // below restores it (FlowCanvas focus-reclaim precedent).
-    const reclaimRef = useRef<{ kind: 'item' | 'section'; id: string | number } | null>(null);
-
-    const setContainerEl = useCallback((cref: ContainerRef, el: HTMLElement | null) => {
-      const key = containerKey(cref);
-      if (el) containersRef.current.set(key, { el, cref });
-      else containersRef.current.delete(key);
-    }, []);
-    const setBandEl = useCallback((id: string | number, el: HTMLElement | null) => {
-      if (el) bandsRef.current.set(id, el);
-      else bandsRef.current.delete(id);
-    }, []);
-
-    const constraintsFor = (id: string | number): DashboardItemConstraints | undefined =>
-      typeof constraints === 'function' ? constraints(id) : constraints?.[String(id)];
-
-    // Single choke point for EVERY gesture commit: the engine ops return
-    // `value` by reference when the gesture resolves to the current layout
-    // (clamped resize, unmoved band, vanished id), so one identity check
-    // kills every no-op onChange.
-    const commit = (next: DashboardCanvasValue) => {
-      if (next !== value) onChange?.(next);
-    };
-
-    const handleToggleSection = (sectionId: string | number) => {
-      // Collapse stays active in readOnly AND below the narrow-editing
-      // threshold — it's navigation, not editing.
-      commit(toggleSection(value, sectionId));
-    };
-
-    const highlightKnown = value.sections.some((s) => s.id === highlightedSectionId);
-    useEffect(() => {
-      if (
-        highlightedSectionId != null &&
-        !highlightKnown &&
-        process.env.NODE_ENV !== 'production'
-      ) {
-        console.warn(
-          `[DashboardCanvas] highlightedSectionId "${highlightedSectionId}" matches no section.`,
-        );
-      }
-    }, [highlightedSectionId, highlightKnown]);
-
-    // Sections are composed from a single shared `<Accordion type="multiple">`
-    // (one Item per band) — `value` mirrors which bands are OPEN (inverse of
-    // `collapsed`). Reads `value`, not the render-facing `shown` (computed
-    // below): collapsed never changes mid-gesture, and `value` avoids a
-    // declaration-order dependency on `shown`. Accordion always hands back
-    // the WHOLE next open-ids array on a click, never which id changed;
-    // exactly one differs per click (its own toggle is the only way this
-    // fires), so the symmetric difference recovers it.
-    const openSectionIds = value.sections
-      .filter((section) => !section.collapsed)
-      .map((section) => String(section.id));
-    const handleSectionOpenChange = (next: string[]) => {
-      const toggledId =
-        next.find((id) => !openSectionIds.includes(id)) ??
-        openSectionIds.find((id) => !next.includes(id));
-      const section = value.sections.find((s) => String(s.id) === toggledId);
-      if (section) handleToggleSection(section.id);
-    };
-
-    // A Modal/Popover/DropdownMenu rendered inside renderItem portals its DOM
-    // to document.body, but its events bubble through the REACT tree into the
-    // item's and root's handlers — the press physically landed on the
-    // overlay's backdrop or panel, never the canvas (the backdrop DOES win
-    // hit-testing; FlowCanvas #290 is the same class on its background pan).
-    // A target outside the canvas root is never a gesture (#362).
-    const isPortalEvent = (event: ReactPointerEvent) =>
-      !(event.target instanceof Node) || !rootRef.current?.contains(event.target);
-
-    // A blocking overlay is open and this canvas is not inside any overlay
-    // portal — the canvas is inert background, so neither a pointer press nor
-    // a keyboard pick may arm (#362).
-    const underOpenOverlay = () =>
-      overlayStack.topDepth() > 0 && !rootRef.current?.closest(OVERLAY_HOST_SELECTOR);
-
-    // A pending press has no capture (capture waits for the 5px arm), so a
-    // pointerup swallowed by an overlay OUTSIDE the React tree never reaches
-    // the root handlers and would leave dragRef stale — hijacking later
-    // hovers into a buttonless drag (a mouse reuses its pointerId) or
-    // blocking arming outright (touch ids retire) (#363). Window CAPTURE
-    // listeners see the physical release before any stopPropagation below;
-    // clearing an UNMOVED press is behavior-preserving (unmoved presses
-    // commit nothing), and a moved drag is capture-owned — its own root
-    // handlers clear the ref before this check could matter.
-    const armPendingRelease = (drag: MoveDrag | SectionDrag) => {
-      const release = (event: PointerEvent) => {
-        // Only the press's OWN pointer resolves it — a stray second pointer
-        // (palm/touch) releasing elsewhere must neither clear a still-live
-        // press nor detach these listeners (that would reopen the swallowed-
-        // release hole for the own pointer).
-        if (event.pointerId !== drag.pointerId) return;
-        window.removeEventListener('pointerup', release, true);
-        window.removeEventListener('pointercancel', release, true);
-        if (dragRef.current === drag && !drag.moved) dragRef.current = null;
-      };
-      window.addEventListener('pointerup', release, true);
-      window.addEventListener('pointercancel', release, true);
-    };
-
-    // --- gesture starts (single `editingEnabled` choke point: readOnly prop OR narrow width) ---
-    const onMovePointerDown = (
-      event: ReactPointerEvent<HTMLDivElement>,
-      placement: DashboardPlacement,
-      container: ContainerRef,
-    ) => {
-      // One gesture at a time: a second pointer going down mid-drag must not
-      // overwrite the state (FlowCanvas discipline), and a keyboard pick owns
-      // the canvas until it drops or cancels. No preventDefault — clicks
-      // inside item bodies pass through until the drag arms.
-      if (!editingEnabled || event.button !== 0 || dragRef.current || pick) return;
-      if (isPortalEvent(event) || underOpenOverlay()) return;
-      const el = event.currentTarget;
-      const rect = el.getBoundingClientRect();
-      const drag: MoveDrag = {
-        kind: 'move',
-        pointerId: event.pointerId,
-        id: placement.id,
-        from: container,
-        homeX: placement.x,
-        homeY: placement.y,
-        startX: event.clientX,
-        startY: event.clientY,
-        grabDX: event.clientX - rect.left,
-        grabDY: event.clientY - rect.top,
-        ghostW: rect.width,
-        ghostH: rect.height,
-        moved: false,
-        target: container,
-        targetKey: containerKey(container),
-        cell: null,
-        previewKey: null,
-        preview: null,
-      };
-      dragRef.current = drag;
-      armPendingRelease(drag);
-      // No capture yet — capture retargets the eventual click to the root,
-      // so it must wait until the drag arms (clicks pass through until then).
-    };
-
-    const onResizePointerDown = (
-      event: ReactPointerEvent<HTMLDivElement>,
-      placement: DashboardPlacement,
-      container: ContainerRef,
-      edge: ResizeEdge,
-    ) => {
-      if (!editingEnabled || event.button !== 0 || dragRef.current || pick) return;
-      if (isPortalEvent(event) || underOpenOverlay()) return;
-      // The handle sits inside the move-drag surface — never arm both.
-      event.stopPropagation();
-      dragRef.current = {
-        kind: 'resize',
-        pointerId: event.pointerId,
-        id: placement.id,
-        container,
-        containerKey: containerKey(container),
-        edge,
-        startX: event.clientX,
-        startY: event.clientY,
-        startW: placement.w,
-        startH: placement.h,
-        lastW: placement.w,
-        lastH: placement.h,
-        preview: null,
-      };
-      // Handles have no click semantics — capture immediately (on the root).
-      capturePointer(rootRef.current, event.pointerId);
-    };
-
-    const onHeaderPointerDown = (
-      event: ReactPointerEvent<HTMLDivElement>,
-      sectionId: string | number,
-    ) => {
-      if (!editingEnabled || event.button !== 0 || dragRef.current || pick) return;
-      if (isPortalEvent(event) || underOpenOverlay()) return;
-      // Called only from the section's dedicated grip handle (see
-      // DashboardCanvasSection's remarks) — no target-based exclusion needed,
-      // the toggle button and the renderSectionHeader extras never wire this.
-      const fromIndex = value.sections.findIndex((section) => section.id === sectionId);
-      if (fromIndex === -1) return;
-      const drag: SectionDrag = {
-        kind: 'section',
-        pointerId: event.pointerId,
-        id: sectionId,
-        fromIndex,
-        startX: event.clientX,
-        startY: event.clientY,
-        moved: false,
-        slot: fromIndex,
-      };
-      dragRef.current = drag;
-      armPendingRelease(drag);
-    };
-
-    // --- pointer stream (root-level; capture retargeting still bubbles here) ---
-    const handleRootPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
-      onPointerMoveProp?.(event);
-      const drag = dragRef.current;
-      if (!drag || event.pointerId !== drag.pointerId) return;
-
-      if (drag.kind === 'move') {
-        if (!drag.moved) {
-          // Portal-bubbled moves never ARM: an overlay opened on the press
-          // itself (before the 5px threshold) must not have its backdrop
-          // moves promote the pending drag. Once armed, capture retargets
-          // the stream to the root, so this can't misfire mid-drag.
-          if (
-            isPortalEvent(event) ||
-            Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) <
-              DRAG_ACTIVATION_PX
-          ) {
-            return;
-          }
-          drag.moved = true;
-          capturePointer(rootRef.current, event.pointerId);
-        }
-        // Drop target = the registered container grid under the pointer.
-        // Collapsed section bodies stay MOUNTED (Accordion.Content animates,
-        // never unmounts) and so stay registered — isCollapsedSection skips
-        // them explicitly here so their bands still can't be targets; in
-        // dead zones (headers, gaps, outside) the last hovered container
-        // keeps the drop.
-        for (const entry of containersRef.current.values()) {
-          if (isCollapsedSection(value, entry.cref)) continue;
-          const r = entry.el.getBoundingClientRect();
-          if (
-            event.clientX >= r.left &&
-            event.clientX <= r.right &&
-            event.clientY >= r.top &&
-            event.clientY <= r.bottom
-          ) {
-            drag.target = entry.cref;
-            drag.targetKey = containerKey(entry.cref);
-            break;
-          }
-        }
-        const entry = containersRef.current.get(drag.targetKey);
-        if (!entry) return;
-        const { rect, colWidth, rowHeight, gap } = measureGrid(entry.el, columns);
-        // Snap by the ghost's origin (pointer minus grab offset), not the
-        // pointer itself — grabbing a wide item mid-body must not yank its
-        // left edge to the cursor column.
-        const originX = event.clientX - drag.grabDX;
-        const originY = event.clientY - drag.grabDY;
-        const origin = cellFromPoint(originX, originY, rect, colWidth, rowHeight, gap, columns);
-        // #694: over another widget the POINTER picks insert-before/after
-        // (hit-tested against the ORIGINAL value, never the preview, so the
-        // preview can't flip the half under a still pointer).
-        const colPitch = colWidth + gap;
-        const rowPitch = rowHeight + gap;
-        const dragged = itemsOf(value, drag.from).find((p) => p.id === drag.id);
-        const cell =
-          dragged && colPitch > 0 && rowPitch > 0
-            ? insertionCell(
-                itemsOf(value, drag.target),
-                drag.id,
-                dragged.w,
-                (event.clientX - rect.left) / colPitch,
-                (event.clientY - rect.top) / rowPitch,
-                origin,
-                columns,
-              )
-            : origin;
-        if (
-          !drag.preview ||
-          drag.previewKey !== drag.targetKey ||
-          drag.cell?.x !== cell.x ||
-          drag.cell?.y !== cell.y
-        ) {
-          // The preview IS the engine result of the hypothetical drop — the
-          // exact value a pointerup right now would commit.
-          drag.preview = applyMove(value, drag.from, drag.target, drag.id, cell.x, cell.y, columns);
-          drag.previewKey = drag.targetKey;
-          drag.cell = cell;
-        }
-        const rootRect = rootRef.current?.getBoundingClientRect();
-        // #695: keep the ghost inside the root so it can't grow a scrollbar.
-        const ghost = clampGhost(
-          originX - (rootRect?.left ?? 0),
-          originY - (rootRect?.top ?? 0),
-          drag.ghostW,
-          drag.ghostH,
-          rootRect?.width ?? Infinity,
-          rootRect?.height ?? Infinity,
-        );
-        setLive({
-          kind: 'move',
-          id: drag.id,
-          value: drag.preview,
-          h: dragged?.h ?? 0,
-          target: drag.targetKey,
-          ghost: { ...ghost, width: drag.ghostW, height: drag.ghostH },
-        });
-        return;
-      }
-
-      if (drag.kind === 'resize') {
-        const entry = containersRef.current.get(drag.containerKey);
-        if (!entry) return;
-        const { colWidth, rowHeight, gap } = measureGrid(entry.el, columns);
-        const dw =
-          drag.edge === 's' ? 0 : Math.round((event.clientX - drag.startX) / (colWidth + gap));
-        const dh =
-          drag.edge === 'e' ? 0 : Math.round((event.clientY - drag.startY) / (rowHeight + gap));
-        const w = drag.startW + dw;
-        const h = drag.startH + dh;
-        if (!drag.preview || w !== drag.lastW || h !== drag.lastH) {
-          drag.lastW = w;
-          drag.lastH = h;
-          drag.preview = applyResize(
-            value,
-            drag.container,
-            drag.id,
-            w,
-            h,
-            constraintsFor(drag.id),
-            columns,
-          );
-        }
-        setLive({ kind: 'resize', id: drag.id, value: drag.preview });
-        return;
-      }
-
-      // Section band reorder — vertical only.
-      if (!drag.moved) {
-        // Same portal-arming guard as the move branch above.
-        if (
-          isPortalEvent(event) ||
-          Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) <
-            DRAG_ACTIVATION_PX
-        ) {
-          return;
-        }
-        drag.moved = true;
-        capturePointer(rootRef.current, event.pointerId);
-      }
-      // Insertion slot = how many band midpoints the pointer has passed.
-      let slot = 0;
-      for (const section of value.sections) {
-        const el = bandsRef.current.get(section.id);
-        if (!el) continue;
-        const r = el.getBoundingClientRect();
-        if (event.clientY > r.top + r.height / 2) slot += 1;
-      }
-      drag.slot = slot;
-      setLive({ kind: 'section', id: drag.id, slot });
-    };
-
-    const handleRootPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
-      onPointerUpProp?.(event);
-      const drag = dragRef.current;
-      if (!drag || event.pointerId !== drag.pointerId) return;
-      // End-of-gesture cleanup ALWAYS runs (FlowCanvas precedent) so a drag
-      // can never get stuck; the commit below is the conditional part.
-      dragRef.current = null;
-      setLive(null);
-      // Commits recompute from the CURRENT `value` closure, never the cached
-      // preview — a controlled update mid-gesture must not be reverted.
-      if (drag.kind === 'move') {
-        if (!drag.moved || !drag.cell) return;
-        // No-op drop: same container, same cell → the gesture changed
-        // nothing, even if committing would compact an uncompacted value.
-        if (
-          containerKey(drag.from) === drag.targetKey &&
-          drag.cell.x === drag.homeX &&
-          drag.cell.y === drag.homeY
-        ) {
-          return;
-        }
-        commit(
-          applyMove(value, drag.from, drag.target, drag.id, drag.cell.x, drag.cell.y, columns),
-        );
-        return;
-      }
-      if (drag.kind === 'resize') {
-        // Requested dims unchanged → bail before applyResize, so a no-op
-        // gesture can't commit a compaction of an untouched value.
-        if (drag.lastW === drag.startW && drag.lastH === drag.startH) return;
-        commit(
-          applyResize(
-            value,
-            drag.container,
-            drag.id,
-            drag.lastW,
-            drag.lastH,
-            constraintsFor(drag.id),
-            columns,
-          ),
-        );
-        return;
-      }
-      if (!drag.moved) return;
-      // Slot counts ALL bands including the dragged one, so slots past it
-      // shift down by one when it's spliced out.
-      const toIndex = drag.slot > drag.fromIndex ? drag.slot - 1 : drag.slot;
-      commit(reorderSection(value, drag.id, toIndex));
-    };
-
-    const handleRootPointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {
-      onPointerCancelProp?.(event);
-      const drag = dragRef.current;
-      if (!drag || event.pointerId !== drag.pointerId) return;
-      // The system aborted the gesture — restore `value`, commit nothing.
-      dragRef.current = null;
-      setLive(null);
-    };
-
-    const handleLostPointerCapture = (event: ReactPointerEvent<HTMLDivElement>) => {
-      onLostPointerCaptureProp?.(event);
-      // Safety net: a normal release fires this AFTER pointerup already
-      // cleared the state; still holding a drag here means the capture died
-      // unexpectedly — abandon the gesture instead of leaving it stuck.
-      const drag = dragRef.current;
-      if (!drag || event.pointerId !== drag.pointerId) return;
-      dragRef.current = null;
-      setLive(null);
-    };
-
-    // --- keyboard editing — same engine calls + commit choke point as pointer ---
-
-    const cancelPick = () => {
-      setPick(null);
-      announce(t('dashboardCanvas.cancelled'));
-    };
-
-    /** One arrow step of a picked item; crossing a container edge moves bands. */
-    const stepPick = (current: KeyboardPick, key: string) => {
-      const dx = key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0;
-      const dy = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0;
-      // Keyboard targets = expanded containers in band order; collapsed
-      // sections are skipped (pointer drop-target parity).
-      const order: ContainerRef[] = [
-        TOP_CONTAINER,
-        ...value.sections
-          .filter((section) => !section.collapsed)
-          .map((section): ContainerRef => ({ kind: 'section', id: section.id })),
-      ];
-      const idx = order.findIndex((cref) => containerKey(cref) === containerKey(current.container));
-      let container = current.container;
-      let crossed: ContainerRef | null = null;
-      const x = Math.min(Math.max(current.x + dx, 0), columns - current.w);
-      let y = current.y + dy;
-      if (idx !== -1 && dy > 0 && y > bottomOf(current.preview, container, current.id)) {
-        // Below the container's last occupied row: enter the next band at its
-        // top, or clamp at the bottom when there is none.
-        const next = order[idx + 1];
-        if (next) {
-          container = next;
-          crossed = next;
-          y = 0;
-        } else {
-          y = bottomOf(current.preview, container, current.id);
-        }
-      } else if (idx !== -1 && dy < 0 && y < 0) {
-        // Above the top row: enter the previous band at its bottom.
-        const prev = order[idx - 1];
-        if (prev) {
-          container = prev;
-          crossed = prev;
-          y = bottomOf(current.preview, prev, current.id);
-        } else {
-          y = 0;
-        }
-      } else {
-        y = Math.max(y, 0);
-      }
-      const preview = applyMove(value, current.from, container, current.id, x, y, columns);
-      reclaimRef.current = { kind: 'item', id: current.id };
-      setPick({ ...current, container, x, y, preview });
-      if (crossed) {
-        announce(
-          crossed.kind === 'top'
-            ? t('dashboardCanvas.enteredTopLevel')
-            : t('dashboardCanvas.enteredSection', {
-                // `||`: the id tail is here so the announcement always names
-                // something; `title: ''` would have announced "Entered ".
-                title:
-                  value.sections.find((section) => section.id === crossed.id)?.title ||
-                  String(crossed.id),
-              }),
-        );
-      } else {
-        announce(
-          t('dashboardCanvas.movedTo', {
-            x: x + 1,
-            y: y + 1,
-            container:
-              container.kind === 'section'
-                ? value.sections.find((section) => section.id === container.id)?.title
-                : undefined,
-          }),
-        );
-      }
-    };
-
-    const onItemKeyDown = (
-      event: ReactKeyboardEvent<HTMLDivElement>,
-      placement: DashboardPlacement,
-      container: ContainerRef,
-    ) => {
-      // Only keys aimed at the cell itself — interactive widget content keeps
-      // its own keystrokes (FlowCanvas key-target discipline).
-      if (event.target !== event.currentTarget) return;
-      const { key } = event;
-      const activate = key === 'Enter' || key === ' ';
-      if (pick) {
-        if (pick.id !== placement.id) return; // one pick at a time
-        if (key === 'Escape') {
-          // Layered dismiss: this Escape ends the pick, never a host modal.
-          event.preventDefault();
-          event.stopPropagation();
-          cancelPick();
-          return;
-        }
-        if (activate) {
-          event.preventDefault();
-          setPick(null);
-          // Same-cell drop mirrors the pointer no-op guard: nothing changed,
-          // even if committing would compact an uncompacted value.
-          if (
-            !(
-              containerKey(pick.from) === containerKey(pick.container) &&
-              pick.x === pick.homeX &&
-              pick.y === pick.homeY
-            )
-          ) {
-            commit(applyMove(value, pick.from, pick.container, pick.id, pick.x, pick.y, columns));
-          }
-          announce(t('dashboardCanvas.dropped'));
-          return;
-        }
-        if (key.startsWith('Arrow')) {
-          event.preventDefault();
-          stepPick(pick, key);
-        }
-        return;
-      }
-      // A blocking overlay above the canvas gates the whole keyboard editing
-      // surface, not just the pick: `inert` already makes the cells
-      // unfocusable in the normal page case — this catches programmatic-focus
-      // edges (#362). The exemption is "inside ANY overlay host", so a canvas
-      // in a Drawer under a stacked Modal can still arm a fresh keyboard pick
-      // (pointer can't reach it; the mid-gesture abort covers post-arm opens)
-      // — deliberate residual.
-      if (underOpenOverlay()) return;
-      if (activate) {
-        event.preventDefault(); // Space must not scroll the page
-        setPick({
-          id: placement.id,
-          from: container,
-          container,
-          homeX: placement.x,
-          homeY: placement.y,
-          w: placement.w,
-          x: placement.x,
-          y: placement.y,
-          preview: value,
-        });
-        announce(t('dashboardCanvas.pickedUp'));
-        return;
-      }
-      if (event.shiftKey && key.startsWith('Arrow')) {
-        event.preventDefault();
-        const w = placement.w + (key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0);
-        const h = placement.h + (key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0);
-        // Committed per keypress — no resize mode (FlowCanvas nudge precedent).
-        const next = applyResize(
-          value,
-          container,
-          placement.id,
-          w,
-          h,
-          constraintsFor(placement.id),
-          columns,
-        );
-        commit(next);
-        // Announce the engine-clamped size: at a constraint the layout does
-        // not change, but the user still needs the "you're at the limit" echo.
-        const result = itemsOf(next, container).find((p) => p.id === placement.id) ?? placement;
-        announce(t('dashboardCanvas.resized', { w: result.w, h: result.h }));
-      }
-    };
-
-    const onHeaderKeyDown = (
-      event: ReactKeyboardEvent<HTMLButtonElement>,
-      sectionId: string | number,
-    ) => {
-      if (!event.shiftKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) return;
-      // Same keyboard-editing gate as onItemKeyDown (#362) — the focus-reclaim
-      // effect programmatically focuses this very trigger, so inert alone
-      // can't be relied on to keep keys out.
-      if (underOpenOverlay()) return;
-      // Composed onto Accordion.Trigger's own onKeyDown (it runs ours first);
-      // the target is always the trigger button itself — extras and the grip
-      // handle live outside it, so there's nothing to exclude here anymore.
-      const fromIndex = value.sections.findIndex((section) => section.id === sectionId);
-      if (fromIndex === -1) return;
-      event.preventDefault();
-      const next = reorderSection(
-        value,
-        sectionId,
-        fromIndex + (event.key === 'ArrowDown' ? 1 : -1),
-      );
-      if (next === value) return; // clamped at the edge — nothing moved
-      reclaimRef.current = { kind: 'section', id: sectionId };
-      commit(next);
-      announce(
-        t('dashboardCanvas.sectionMoved', {
-          title: value.sections[fromIndex].title,
-          position: next.sections.findIndex((section) => section.id === sectionId) + 1,
-        }),
-      );
-    };
-
-    // Focus reclaim. No dependency array — the flag is only ever raised
-    // alongside a state update, and the check costs a ref read. When focus
-    // survived (same element, still connected) this is a no-op.
-    useEffect(() => {
-      const target = reclaimRef.current;
-      if (!target) return;
-      reclaimRef.current = null;
-      const root = rootRef.current;
-      if (!root) return;
-      const active = document.activeElement;
-      if (
-        active &&
-        active !== document.body &&
-        active !== document.documentElement &&
-        active.isConnected &&
-        root.contains(active)
-      ) {
-        return;
-      }
-      // Attribute-value scan instead of a selector: ids are consumer strings
-      // and CSS-escaping them buys nothing at this element count.
-      const el =
-        target.kind === 'item'
-          ? Array.from(root.querySelectorAll<HTMLElement>('[data-dc-item]')).find(
-              (node) => node.getAttribute('data-dc-item') === String(target.id),
-            )
-          : Array.from(root.querySelectorAll<HTMLElement>('[data-dc-section]'))
-              .find((node) => node.getAttribute('data-dc-section') === String(target.id))
-              ?.querySelector<HTMLElement>('button[aria-expanded]');
-      el?.focus({ preventScroll: true });
-    });
-
-    // Focus leaving the picked item cancels the pick — Tab is never trapped
-    // (WCAG 2.1.2) and an unfocused pick would be uncancellable (Escape is
-    // handled on the item). The reclaim flag distinguishes the transient
-    // blur of a mid-step remount/reorder from a real departure.
-    const handleRootBlur = (event: ReactFocusEvent<HTMLDivElement>) => {
-      onBlurProp?.(event);
-      if (!pick || reclaimRef.current) return;
-      const target = event.target as HTMLElement;
-      if (target.getAttribute?.('data-dc-item') === String(pick.id)) cancelPick();
-    };
-
-    // Escape cancels an armed gesture and restores the current value. An
-    // armed drag or keyboard pick is an Escape-consuming mode — registering
-    // it as a floating surface makes a host Modal/Drawer yield that Escape
-    // (FlowCanvas #282). The pick's own Escape lands on the focused item.
-    const dragging = live != null;
-    useFloatingSurface(dragging || pick != null);
-    // Window-level Escape: cancels a pointer drag wherever focus sits, and
-    // is the belt-and-braces exit for a pick whose item lost focus (the
-    // item-level handler consumes Escape first when focused).
-    useEffect(() => {
-      if (!dragging && !pick) return undefined;
-      const onKeyDown = (event: KeyboardEvent) => {
-        if (event.key !== 'Escape') return;
-        dragRef.current = null;
-        setLive(null);
-        if (pick) cancelPick();
-      };
-      window.addEventListener('keydown', onKeyDown);
-      return () => window.removeEventListener('keydown', onKeyDown);
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- cancelPick is re-created per render but only calls setters + announce
-    }, [dragging, pick]);
-
-    // JS mirror of the CSS `@container dashboard-canvas (max-width: …)`
-    // stack rule for the chosen breakpoint — width alone gates editing
-    // (below it, gestures + keyboard editing turn off; collapse toggles are
-    // unaffected). typeof-guard for jsdom; a reported 0 width means the root
-    // isn't laid out yet (hidden mount), which stays wide for the same
-    // reason FlowCanvas's node ResizeObserver treats 0×0 as unmeasured
-    // rather than "small." Re-created when `stackBelow` changes — observe()
-    // re-reports the current size, so the gate re-evaluates without a
-    // resize.
-    useEffect(() => {
-      const root = rootRef.current;
-      if (!root || typeof ResizeObserver === 'undefined') return undefined;
-      const threshold = STACK_GATE_PX[stackBelow];
-      const observer = new ResizeObserver((entries) => {
-        const width = entries[0]?.contentRect.width ?? 0;
-        setIsNarrow(width > 0 && width <= threshold);
-      });
-      observer.observe(root);
-      return () => observer.disconnect();
-    }, [stackBelow]);
-
-    // An overlay opening mid-gesture aborts it (#362): pointer capture keeps
-    // the move stream flowing to the root even after a backdrop covers the
-    // canvas, so without this the drag would keep going under the modal.
-    // Depth is compared against the stack at gesture start, so a canvas
-    // already INSIDE an open overlay is unaffected by its own host; a close
-    // (depth shrinking) never aborts. Same restore as Escape.
-    useEffect(() => {
-      if (!dragging && !pick) return undefined;
-      const baseDepth = overlayStack.topDepth();
-      return overlayStack._subscribe(() => {
-        if (overlayStack.topDepth() <= baseDepth) return;
-        dragRef.current = null;
-        setLive(null);
-        if (pick) cancelPick();
-      });
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- cancelPick is re-created per render but only calls setters + announce
-    }, [dragging, pick]);
-
-    // readOnly OR the narrow-width gate flipping editing off mid-gesture
-    // aborts it — same restore as Escape.
-    useEffect(() => {
-      if (editingEnabled) return;
-      dragRef.current = null;
-      setLive(null);
-      if (pick) {
-        setPick(null);
-        announce(t('dashboardCanvas.cancelled'));
-      }
-      // Deliberately keyed on the two raw gate inputs (not the derived
-      // `editingEnabled`, recomputed every render); the closure is from the
-      // render where either flipped, so `pick` is current.
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on the raw gate inputs, see above
-    }, [readOnly, isNarrow]);
-
-    // An external value change mid-pick invalidates the pick's home/from
-    // coordinates (and can delete the picked item outright, which would
-    // strand the canvas: every pointerdown is gated on `pick` and the
-    // Escape handler lives on the now-gone item) — abort, same discipline
-    // as the readOnly flip. Identity-guarded, no dependency array: a drop
-    // clears `pick` before onChange in the same batch, so our own commits
-    // never trip this.
-    const prevValueRef = useRef(value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- identity-guarded, runs after every commit by design
-    useEffect(() => {
-      if (prevValueRef.current === value) return;
-      prevValueRef.current = value;
-      if (!pick) return;
-      setPick(null);
-      announce(t('dashboardCanvas.cancelled'));
-    });
-
-    // Render EXACTLY what the engine returned for the in-flight gesture —
-    // never parallel geometry. Section band order only changes on commit.
-    const shown =
-      live != null && live.kind !== 'section' ? live.value : pick != null ? pick.preview : value;
-    const gestures: CanvasGestures = {
-      // The item/section internals only care whether editing is off, not
-      // WHY — readOnly and narrow-width both render identically (no
-      // handles, not editing-focusable, gestures inert).
-      readOnly: !editingEnabled,
-      movingId: live?.kind === 'move' ? live.id : null,
-      resizingId: live?.kind === 'resize' ? live.id : null,
-      pickedId: pick?.id ?? null,
-      instructionsId,
-      onMovePointerDown,
-      onResizePointerDown,
-      onItemKeyDown,
-    };
-
-    // Band insertion indicator position (slot among N+1 gaps), suppressed
-    // when dropping there would be a no-op.
-    let bandSlot: number | null = null;
-    if (live?.kind === 'section') {
-      const fromIndex = value.sections.findIndex((section) => section.id === live.id);
-      const toIndex = live.slot > fromIndex ? live.slot - 1 : live.slot;
-      if (toIndex !== fromIndex) bandSlot = live.slot;
-    }
-    const bandIndicator = (
-      <div className={styles.bandIndicator} data-dc-band-indicator aria-hidden="true" />
-    );
-
-    return (
-      // {...rest} last so consumer overrides win (Pattern A); the pointer
-      // handlers are extracted above and re-invoked inside ours.
-      <div
-        ref={mergeRefs(ref, rootRef)}
-        role="group"
-        aria-label={t('dashboardCanvas.canvas')}
-        aria-describedby={mergeAriaDescribedby(ariaDescribedby, instructionsId)}
-        className={clsx(styles.canvas, stackClass[stackBelow], className)}
-        // Consumer style spreads last so its own custom properties win.
-        style={{
-          ['--dc-cols' as string]: columns,
-          // #696: trailing drop space height, only during a move-drag.
-          ...(live?.kind === 'move' && { ['--dc-trailing-rows' as string]: live.h }),
-          ...style,
-        }}
-        data-readonly={readOnly ? '' : undefined}
-        data-narrow={isNarrow ? '' : undefined}
-        data-dragging={dragging ? '' : undefined}
-        onPointerMove={handleRootPointerMove}
-        onPointerUp={handleRootPointerUp}
-        onPointerCancel={handleRootPointerCancel}
-        onLostPointerCapture={handleLostPointerCapture}
-        onBlur={handleRootBlur}
-        {...rest}
-      >
-        {/* .sizer is the square-cell measuring box: an unnamed size container
-            whose content-box width IS the grid's width, so the `cqw` in
-            `--dashboard-canvas-row` resolves to it (an element can't resolve
-            cq units against itself — the root's own container only serves the
-            named stack queries). */}
-        <div className={styles.sizer}>
-          <div
-            className={styles.container}
-            data-dc-container="top"
-            // Intentional one-time shift: padding follows the target, so bands below
-            // move once when the drag crosses into another container.
-            data-dc-drop-target={live?.kind === 'move' && live.target === 'top' ? '' : undefined}
-            data-dc-empty={shown.items.length === 0 ? '' : undefined}
-            ref={(el) => setContainerEl(TOP_CONTAINER, el)}
-          >
-            {sortByPosition(shown.items).map((item) => (
-              <DashboardCanvasItem
-                key={item.id}
-                placement={item}
-                container={TOP_CONTAINER}
-                gestures={gestures}
-              >
-                {renderItem(item.id)}
-              </DashboardCanvasItem>
-            ))}
-          </div>
-        </div>
-        {shown.sections.length > 0 && (
-          <Accordion
-            type="multiple"
-            value={openSectionIds}
-            onValueChange={handleSectionOpenChange}
-            gap="md"
-            indicatorSide="left"
-          >
-            {shown.sections.map((section, index) => (
-              <Fragment key={section.id}>
-                {bandSlot === index && bandIndicator}
-                <DashboardCanvasSection
-                  section={section}
-                  renderItem={renderItem}
-                  renderSectionHeader={renderSectionHeader}
-                  gestures={gestures}
-                  dragging={live?.kind === 'section' && live.id === section.id}
-                  dropTarget={
-                    live?.kind === 'move' &&
-                    live.target === containerKey({ kind: 'section', id: section.id })
-                  }
-                  onHeaderPointerDown={onHeaderPointerDown}
-                  onHeaderKeyDown={onHeaderKeyDown}
-                  setContainerEl={setContainerEl}
-                  setBandEl={setBandEl}
-                  highlighted={section.id === highlightedSectionId}
-                  onHighlightDone={onSectionHighlightDone}
-                />
-              </Fragment>
-            ))}
-            {bandSlot === shown.sections.length && bandIndicator}
-          </Accordion>
-        )}
-        {live?.kind === 'move' && (
-          <div
-            className={styles.ghost}
-            data-dc-ghost
-            aria-hidden="true"
-            style={{
-              width: live.ghost.width,
-              height: live.ghost.height,
-              transform: `translate(${live.ghost.left}px, ${live.ghost.top}px)`,
-            }}
-          >
-            {renderItem(live.id)}
-          </div>
-        )}
-        <div id={instructionsId} className={styles.srOnly}>
-          {t(
-            editingEnabled
-              ? 'dashboardCanvas.instructions'
-              : 'dashboardCanvas.instructionsReadOnly',
-          )}
-        </div>
-        <div role="status" className={styles.srOnly}>
-          <span key={announcement.nonce}>{announcement.text}</span>
-        </div>
-      </div>
-    );
-  },
-);