diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d113f1..897b703 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,14 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
   reaches incompatible dependencies (#383).
 
 ### Changed
+- KPI queries now have one frameless Dashboard presentation in Grid Tiles,
+  Full view, Report, 2-column, and 3-column styles. Flow KPI-band members and
+  transparent grid wrappers move with Command/Ctrl-drag while plain dragging
+  continues to select text; movement reuses the shared floating preview,
+  destination resolution, auto-scroll, cancellation, and exact-once commit
+  path. Grid KPI title/delete/resize chrome appears transiently on hover or
+  keyboard focus without shifting content, and resize is keyboard-operable
+  with arrow keys (#340).
 - Consolidated the non-Iceberg examples into three responsive flagship
   dashboards: On-time flights, Shop analytics, and ClickHouse Operations.
   Each uses an authored `grafana-grid@1` layout with a complete `flow@1`
diff --git a/src/styles.css b/src/styles.css
index 7328184..8f4cd3e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2720,6 +2720,15 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
 /* A member's stable host contributes its children (cards, or a state card)
    directly to the stream's flex-wrap — it is never itself a visible box. */
 .dash-kpi-member { display: contents; }
+.dash-grid.modkey .dash-kpi-member:hover > * { cursor: grab; }
+.dash-kpi-member.dash-drop-target > * {
+  outline: 2px dashed var(--accent); outline-offset: -2px;
+}
+.dash-kpi-member.dash-floating {
+  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
+  box-sizing: border-box; background: var(--bg-side); border-radius: 10px;
+  outline: 2px solid var(--accent); outline-offset: -2px;
+}
 .dash-kpi-state-card {
   --kpi-accent: var(--accent);
   min-width: 160px; max-width: 320px; padding: 14px 16px;
@@ -2829,7 +2838,8 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
 .dash-gg-del, .dash-gg-resize { user-select: none; } /* #332: edit chrome stays non-selectable */
 .dash-gg-resize { display: none; }
 .dash-gg-grid .dash-gg-resize {
-  display: block; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
+  display: block; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; padding: 0;
+  border: 0; background: transparent; cursor: nwse-resize;
 }
 .dash-gg-resize::after {
   content: ''; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px;
@@ -2890,13 +2900,8 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
    host was forced to `1fr` still tries to occupy N implicit tracks, rendering
    side-by-side/overflowing instead of the model's actual N-column layout. */
 
-/* ── #316: view-mode KPI tiles are frameless ───────────────────────────────
-   `.is-view` is a static per-load class (ui/dashboard.ts sets it once per
-   tile card, from the same `readOnly` that already governs drag/remove/
-   resize — it never toggles mid-session; `.is-kpi` is likewise fixed per
-   session today but is still re-toggled defensively on every reconcile,
-   ui/dashboard.ts `reconcileGridTile`). Scoped to
-   `.dash-gg-grid .dash-gg-tile.is-kpi` so:
+/* ── #340: KPI tiles are frameless in edit and view modes ──────────────────
+   Scoped to `.dash-gg-grid .dash-gg-tile.is-kpi` so:
      - a non-KPI grid tile (`.is-view` with no `.is-kpi`) keeps its full frame
        — only KPI content gets this treatment;
      - a flow-rendered card is never matched — flow never applies
@@ -2907,10 +2912,49 @@ table.res-table tbody tr:hover td.idx { background: var(--bg-hover); }
    "invisible structural wrapper" the issue asks for, not a new DOM node, and
    never `display: contents` (that would drop it out of grid placement). The
    accessible name comes from `role="group"`/`aria-label` set directly on this
-   same element (ui/dashboard.ts) — hiding the header visually here does not
-   remove it from the accessibility tree. */
-.dash-gg-grid .dash-gg-tile.is-kpi.is-view {
+   same element. Edit controls are overlay chrome: revealing them never changes
+   the KPI body's size or the tile's authored height. */
+.dash-gg-grid .dash-gg-tile.is-kpi {
   background: transparent; border-color: transparent; border-radius: 0; box-shadow: none;
 }
-.dash-gg-grid .dash-gg-tile.is-kpi.is-view > .dash-tile-head { display: none; }
-.dash-gg-grid .dash-gg-tile.is-kpi.is-view > .dash-tile-body { padding: 0; }
+.dash-gg-grid .dash-gg-tile.is-kpi > .dash-tile-head {
+  position: absolute; z-index: 2; inset: 0 0 auto 0; min-height: 0; padding: 4px 5px;
+  border: 0; opacity: 0; pointer-events: none;
+}
+.dash-gg-grid .dash-gg-tile.is-kpi > .dash-tile-head > .dash-tile-name {
+  width: fit-content; max-width: calc(100% - 30px); padding: 2px 6px;
+  border-radius: 4px; background: color-mix(in srgb, var(--bg-modal) 92%, transparent);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
+}
+.dash-gg-grid .dash-gg-tile.is-kpi > .dash-tile-head > .dash-gg-del { pointer-events: auto; }
+.dash-gg-grid .dash-gg-tile.is-kpi > .dash-tile-body { padding: 0; }
+.dash-gg-grid .dash-gg-tile.is-kpi .dash-gg-grip { display: none; }
+.dash-gg-grid .dash-gg-tile.is-kpi::before {
+  content: ''; position: absolute; z-index: 1; inset: 0; border-radius: 8px;
+  outline: 1px solid transparent; outline-offset: -1px; pointer-events: none;
+}
+.dash-gg-grid .dash-gg-tile.is-kpi:not(.is-view):hover::before,
+.dash-gg-grid .dash-gg-tile.is-kpi:not(.is-view):focus-within::before,
+.dash-gg-grid.modkey .dash-gg-tile.is-kpi:not(.is-view):hover::before {
+  outline-color: var(--border);
+}
+.dash-gg-grid .dash-gg-tile.is-kpi:not(.is-view):hover > .dash-tile-head,
+.dash-gg-grid .dash-gg-tile.is-kpi:not(.is-view):focus-within > .dash-tile-head,
+.dash-gg-grid.modkey .dash-gg-tile.is-kpi:not(.is-view):hover > .dash-tile-head {
+  opacity: 1;
+}
+.dash-gg-grid .dash-gg-tile.is-kpi:hover .dash-gg-resize::after,
+.dash-gg-grid .dash-gg-tile.is-kpi:focus-within .dash-gg-resize::after,
+.dash-gg-grid.modkey .dash-gg-tile.is-kpi:hover .dash-gg-resize::after,
+.dash-gg-grid .dash-gg-tile.is-kpi .dash-gg-resize:focus-visible::after { opacity: 1; }
+.dash-gg-grid .dash-gg-tile.is-kpi:focus-within .dash-gg-del { opacity: 1; }
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-floating,
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-gg-resizing {
+  background: var(--bg-side); border-color: transparent; border-radius: 8px;
+}
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-floating::before,
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-gg-resizing::before {
+  outline: 2px solid var(--accent); outline-offset: -2px;
+}
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-floating > .dash-tile-head,
+.dash-gg-grid .dash-gg-tile.is-kpi.dash-gg-resizing > .dash-tile-head { opacity: 1; }
diff --git a/src/ui/dashboard.ts b/src/ui/dashboard.ts
index 0662a00..43fc416 100644
--- a/src/ui/dashboard.ts
+++ b/src/ui/dashboard.ts
@@ -64,7 +64,8 @@ import type {
 import { defaultLayoutRegistry, resolveLayoutPluginSync } from '../dashboard/layouts/layout-registry.js';
 import type { FlowLayoutModel } from '../dashboard/layouts/flow-layout.js';
 import {
-  DEFAULT_GRID_HEIGHT_UNITS, GRAFANA_GRID_MAX_COLUMNS, GRID_GAP_PX, contentBoxWidth, deriveFlowFallback,
+  DEFAULT_GRID_HEIGHT_UNITS, GRAFANA_GRID_MAX_COLUMNS, GRID_GAP_PX, GRID_HEIGHT_UNIT_MAX, GRID_HEIGHT_UNIT_MIN,
+  contentBoxWidth, deriveFlowFallback,
   gridHeightUnitsToPx, snapGridHeight, snapGridSpan,
 } from '../dashboard/layouts/grafana-grid-layout.js';
 import type { GrafanaGridLayoutModel, GridRenderMode } from '../dashboard/layouts/grafana-grid-layout.js';
@@ -186,6 +187,10 @@ let installedGridResizeListener: { win: Window; handler: () => void } | null = n
 let installedModifierListeners:
   | { win: Window; onKeyDown: (e: KeyboardEvent) => void; onKeyUp: (e: KeyboardEvent) => void; onBlur: () => void }
   | null = null;
+// An in-flight move owns window/document listeners and pointer capture. A new
+// route render must cancel it before replacing the page so no stale gesture can
+// commit into the newly-rendered Dashboard.
+let installedGestureCancel: (() => void) | null = null;
 
 /**
  * Build the flow preset switcher as a compact `<select>` (2026-07-18 owner
@@ -382,6 +387,7 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     m.win.removeEventListener('blur', m.onBlur);
     installedModifierListeners = null;
   }
+  if (installedGestureCancel) installedGestureCancel();
 
   // #288 Phase 6: resolve WHICH dashboard this tab shows and in which MODE from
   // the parsed open-source (ADR-0003). `current-workspace` (?ws=&dash=) verifies
@@ -1096,6 +1102,9 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
 
   // ── Tile DOM ──────────────────────────────────────────────────────────────
   const tileEls = new Map<string, TileEl>();
+  // Flow KPI tiles do not render their cached `.dash-tile` card. Their
+  // `.dash-kpi-member` host is the structural/movement surface instead.
+  const flowKpiHosts = new Map<string, HTMLElement>();
   // #332: the origin card of a just-completed move whose synthesized click must
   // be swallowed once (see wireTileDrag). Module-to-gesture, not per-card.
   let clickSuppressCard: HTMLElement | null = null;
@@ -1180,6 +1189,7 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     handle.addEventListener('pointerdown', (event: Event) => {
       if (activeEngine !== 'grafana-grid') return;
       const start = event as PointerEvent;
+      if (start.button !== 0) return;
       start.preventDefault();
       start.stopPropagation(); // never let the resize handle start a card drag
       const full = gridRenderMode === 'full';
@@ -1193,6 +1203,8 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
       const maxSpan = Math.max(1, columns - colStart);
       let curSpan = Math.min(placement ? placement.span : columns, maxSpan);
       let curHeight = placement ? placement.heightUnits : DEFAULT_GRID_HEIGHT_UNITS;
+      const savedGridColumn = card.style.gridColumn;
+      const savedHeight = card.style.height;
       if (!full) card.style.gridColumn = `${colStart + 1} / span ${curSpan}`;
       const rect = card.getBoundingClientRect();
       const colWidthPx = (measuredGridWidth() - GRID_GAP_PX * (columns - 1)) / columns;
@@ -1206,14 +1218,56 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         const height = snapGridHeight(ev.clientY - rect.top);
         if (height !== curHeight) { curHeight = height; setGridHeightPx(card, height); }
       };
-      const up = (): void => {
+      const cleanup = (commit: boolean): void => {
         card.classList.remove('dash-gg-resizing');
         win.removeEventListener('pointermove', move as EventListener);
-        win.removeEventListener('pointerup', up);
+        win.removeEventListener('pointerup', up as EventListener);
+        win.removeEventListener('pointercancel', cancel as EventListener);
+        win.removeEventListener('blur', cancel);
+        doc.removeEventListener('keydown', onKey, true);
+        handle.removeEventListener('lostpointercapture', cancel as EventListener);
+        if (installedGestureCancel === cancel) installedGestureCancel = null;
+        if (typeof handle.hasPointerCapture === 'function' && handle.hasPointerCapture(start.pointerId)) {
+          handle.releasePointerCapture(start.pointerId);
+        }
+        if (!commit) {
+          card.style.gridColumn = savedGridColumn;
+          card.style.height = savedHeight;
+          return;
+        }
         runCommand({ type: 'update-placement', tileId, placement: { span: full ? persistedSpan : curSpan, height: curHeight } });
       };
+      const up = (): void => cleanup(true);
+      const cancel = (): void => cleanup(false);
+      const onKey = (ev: KeyboardEvent): void => { if (ev.key === 'Escape') cancel(); };
       win.addEventListener('pointermove', move as EventListener);
-      win.addEventListener('pointerup', up);
+      win.addEventListener('pointerup', up as EventListener);
+      win.addEventListener('pointercancel', cancel as EventListener);
+      win.addEventListener('blur', cancel);
+      doc.addEventListener('keydown', onKey, true);
+      handle.addEventListener('lostpointercapture', cancel as EventListener);
+      if (typeof handle.setPointerCapture === 'function') handle.setPointerCapture(start.pointerId);
+      installedGestureCancel = cancel;
+    });
+    handle.addEventListener('keydown', (event: Event) => {
+      if (activeEngine !== 'grafana-grid') return;
+      const key = event as KeyboardEvent;
+      const placement = gridPlacementByTile.get(tileId)!;
+      const full = gridRenderMode === 'full';
+      let span = placement.persistedSpan;
+      let height = placement.heightUnits;
+      if (key.key === 'ArrowUp') height = Math.max(GRID_HEIGHT_UNIT_MIN, height - 1);
+      else if (key.key === 'ArrowDown') height = Math.min(GRID_HEIGHT_UNIT_MAX, height + 1);
+      // Keyboard span edits tune the authored placement, not the responsive
+      // effective span. A saved 12-column tile rendered in a 4-column narrow
+      // grid therefore moves 12→11 on ArrowLeft and stays 12 on ArrowRight;
+      // it never jumps to the visible clamp (3/4) and loses desktop intent.
+      else if (!full && key.key === 'ArrowLeft') span = Math.max(1, placement.persistedSpan - 1);
+      else if (!full && key.key === 'ArrowRight') span = Math.min(GRAFANA_GRID_MAX_COLUMNS, placement.persistedSpan + 1);
+      else return;
+      key.preventDefault();
+      if (span === placement.persistedSpan && height === placement.heightUnits) return;
+      runCommand({ type: 'update-placement', tileId, placement: { span, height } });
     });
   }
 
@@ -1271,6 +1325,27 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
       let lastReflowId: string | null = null;          // grid path: last resolved insertion slot
       const touched = new Set<HTMLElement>();           // grid path: siblings carrying a FLIP transform
       const win = doc.defaultView || window;
+      const renderedSurface = (id: string): HTMLElement => {
+        const flowHost = activeEngine === 'flow' ? flowKpiHosts.get(id) : undefined;
+        return flowHost ?? tileEls.get(id)!.card;
+      };
+      const surfaceRect = (surface: HTMLElement): DOMRect => {
+        const own = surface.getBoundingClientRect();
+        if (!surface.classList.contains('dash-kpi-member')) return own;
+        const childRects = [...surface.children].map((child) => child.getBoundingClientRect());
+        const left = Math.min(...childRects.map((r) => r.left));
+        const top = Math.min(...childRects.map((r) => r.top));
+        const right = Math.max(...childRects.map((r) => r.right));
+        const bottom = Math.max(...childRects.map((r) => r.bottom));
+        return new DOMRect(left, top, right - left, bottom - top);
+      };
+      const hitRects = (tileId2: string, surface: HTMLElement): TileRect[] => {
+        const nodes = surface.classList.contains('dash-kpi-member') ? [...surface.children] : [surface];
+        return nodes.map((node) => {
+          const r = node.getBoundingClientRect();
+          return { tileId: tileId2, left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+        });
+      };
       // #338: edge auto-scroll while a move is active. `wireTileDrag` runs
       // BEFORE `.dash-page` is inserted (app.root!.replaceChildren happens
       // once, later, at the end of renderDashboard), so the scroll host and
@@ -1298,9 +1373,9 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         [...grid.children].filter((c): c is HTMLElement => c instanceof HTMLElement && c.classList.contains('dash-gg-tile'));
       const setDrop = (id: string | null): void => {
         if (id === dropId) return;
-        if (dropId) tileEls.get(dropId)!.card.classList.remove('dash-drop-target');
+        if (dropId) renderedSurface(dropId).classList.remove('dash-drop-target');
         dropId = id;
-        if (id && id !== tileId) tileEls.get(id)!.card.classList.add('dash-drop-target');
+        if (id && id !== tileId) renderedSurface(id).classList.add('dash-drop-target');
       };
       // Move the placeholder so the dragged tile PREVIEWS at the exact final
       // index the commit will splice it to. `move-tile` does splice(from,1) then
@@ -1354,13 +1429,10 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         // overlap/hit-testing always measures against these home positions, so a
         // live sibling shift never feeds back into the decision.
         rects = currentDoc.tiles.flatMap((t) => {
-          const c = tileEls.get(t.id)!.card;
-          // A flow-engine KPI tile renders inside the band, so its card is never
-          // placed in the grid; an unplaced card's {0,0,0,0} rect could spuriously
-          // match. `grid.contains` is environment-independent (unlike isConnected).
-          if (!grid.contains(c)) return [];
-          const r = c.getBoundingClientRect();
-          return [{ tileId: t.id, left: r.left, top: r.top, right: r.right, bottom: r.bottom }];
+          const c = renderedSurface(t.id);
+          // Every rendered movement surface is attached to this grid: ordinary
+          // cards directly, KPI members through their band/stream ancestors.
+          return hitRects(t.id, c);
         });
         // Capture the card's HOME rect and inline styles BEFORE inserting the
         // grid placeholder: `grid.insertBefore(placeholder, card)` displaces
@@ -1368,7 +1440,7 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         // after it would capture the shifted (wrong-column) left and the
         // floated tile would sit a column off from the cursor horizontally
         // (real-browser only — happy-dom ignores grid placement).
-        const r0 = card.getBoundingClientRect();
+        const r0 = surfaceRect(card);
         savedHeight = card.style.height;
         savedDisplay = card.style.display;
         if (liveReflow) {
@@ -1391,7 +1463,11 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         // card itself, but if some path ever leaves the card's own computed
         // display as 'contents' it can't be position:fixed meaningfully —
         // force a real box for the duration of the drag.
-        if (win.getComputedStyle(card).display === 'contents') card.style.display = 'block';
+        if (win.getComputedStyle(card).display === 'contents') {
+          // A flow KPI query may own several KPI cards. Preserve the stream's
+          // row/wrap geometry inside the temporary physical wrapper.
+          card.style.display = card.classList.contains('dash-kpi-member') ? 'flex' : 'block';
+        }
         card.classList.add('dash-floating');
         card.style.position = 'fixed';
         card.style.left = r0.left + 'px';
@@ -1461,11 +1537,16 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
         win.removeEventListener('pointercancel', onCancel as EventListener);
         win.removeEventListener('blur', onCancel);
         doc.removeEventListener('keydown', onKey, true);
+        card.removeEventListener('lostpointercapture', onCancel as EventListener);
         autoScroll?.stop();
         autoScroll = null;
         if (moving) { restoreDrag(); setDrop(null); }
         grid.classList.remove('dash-reordering');
         gestureActive = false;
+        if (installedGestureCancel === cleanup) installedGestureCancel = null;
+        if (typeof card.hasPointerCapture === 'function' && card.hasPointerCapture(pe.pointerId)) {
+          card.releasePointerCapture(pe.pointerId);
+        }
       };
       const onUp = (ev: PointerEvent): void => {
         const wasMoving = moving;
@@ -1489,6 +1570,9 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
       win.addEventListener('pointercancel', onCancel as EventListener);
       win.addEventListener('blur', onCancel);
       doc.addEventListener('keydown', onKey, true);
+      card.addEventListener('lostpointercapture', onCancel as EventListener);
+      if (typeof card.setPointerCapture === 'function') card.setPointerCapture(pe.pointerId);
+      installedGestureCancel = cleanup;
     });
   }
 
@@ -1527,7 +1611,9 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     // The grip is a pointer-only drag affordance (no keyboard reorder — a #332
     // non-goal), so it stays aria-hidden; the tile carries its own accessible
     // name. Dragging it starts a move with no modifier; the body needs ⌘/Ctrl.
-    const grip = !readOnly ? h('span', { class: 'dash-gg-grip', title: 'Drag to move (or ⌘/Ctrl-drag the tile)', 'aria-hidden': 'true' }) : null;
+    const grip = !readOnly && !ts.isKpi
+      ? h('span', { class: 'dash-gg-grip', title: 'Drag to move (or Command/Ctrl-drag the tile)', 'aria-hidden': 'true' })
+      : null;
     const delBtn = !readOnly ? h('button', {
       class: 'dash-gg-del', title: 'Remove tile', 'aria-label': 'Remove ' + ts.title + ' from the dashboard',
       onclick: () => { if (activeEngine === 'grafana-grid') runCommand({ type: 'remove-tile', tileId: ts.tileId }); },
@@ -1536,7 +1622,7 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     const body = h('div', { class: 'dash-tile-body' });
     const foot = h('div', { class: 'dash-tile-foot' });
     const resizeHandle = !readOnly
-      ? h('div', { class: 'dash-gg-resize', title: 'Resize', 'aria-label': 'Resize' })
+      ? h('button', { class: 'dash-gg-resize', type: 'button', title: 'Resize', 'aria-label': 'Resize' })
       : null;
     // #316: a static, per-load mode class (view mode never toggles mid-session
     // — `readOnly` is resolved once above, before any tile is built) — CSS
@@ -1549,7 +1635,10 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
     // the same modifier-gated model as the schema graph (#55). Reused verbatim
     // for grafana-grid@1 tiles (#291 — same move-tile command, no engine
     // branching). A read-only (detached view) dashboard never wires it (#288).
-    const card = h('div', { class: 'dash-tile' + (readOnly ? ' is-view' : '') }, head, body, foot, resizeHandle);
+    const card = h('div', {
+      class: 'dash-tile' + (readOnly ? ' is-view' : ''),
+      title: !readOnly && ts.isKpi ? 'Command/Ctrl-drag to move' : undefined,
+    }, head, body, foot, resizeHandle);
     if (!readOnly) wireTileDrag(ts.tileId, card);
     if (resizeHandle) wireGridResize(ts.tileId, resizeHandle, card);
     const tileEl: TileEl = { card, body, foot, panelState: null, destroy: null, paintedRows: null, resizeHandle };
@@ -1701,10 +1790,21 @@ export async function renderDashboard(app: DashboardApp): Promise<void> {
       grid.classList.remove('dash-gg-grid', 'is-full'); // #321: is-full is grid-engine-only chrome
       grid.classList.toggle('is-report', layout.preset === 'report');
       grid.style.gridTemplateColumns = '';
+      flowKpiHosts.clear();
       grid.replaceChildren(...layout.rows.map((row) => {
         if (row.kind === 'kpi-band') {
           const stream = h('div', { class: 'dash-kpi-stream', ...KPI_STREAM_ARIA });
-          for (const member of row.tiles) stream.appendChild(h('div', { class: 'dash-kpi-member', 'data-tile': member.tileId }));
+          for (const member of row.tiles) {
+            const ts = byId.get(member.tileId)!;
+            const host = h('div', {
+              class: 'dash-kpi-member', 'data-tile': member.tileId, role: 'group',
+              'aria-label': ts.title,
+              title: !readOnly ? 'Command/Ctrl-drag to move' : undefined,
+            });
+            flowKpiHosts.set(member.tileId, host);
+            if (!readOnly) wireTileDrag(member.tileId, host);
+            stream.appendChild(host);
+          }
           return h('div', { class: 'dash-row dash-kpi-band' }, stream);
         }
         const rowEl = h('div', { class: 'dash-row', style: { display: 'grid', gridTemplateColumns: `repeat(${row.columns}, minmax(0, 1fr))`, gap: '12px' } });
diff --git a/tests/e2e/dashboard-grid-kpi.html b/tests/e2e/dashboard-grid-kpi.html
index de9ef77..f27d4b3 100644
--- a/tests/e2e/dashboard-grid-kpi.html
+++ b/tests/e2e/dashboard-grid-kpi.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8" />
-  <title>Dashboard grafana-grid KPI harness (#316)</title>
+  <title>Dashboard grafana-grid KPI harness (#340)</title>
   <link rel="stylesheet" href="/src/styles.css" />
   <style>
     body { overflow: auto; background: var(--bg); color: var(--fg); font-family: var(--ui); }
@@ -13,8 +13,8 @@
   </style>
 </head>
 <body data-theme="dark">
-  <!-- #316: this fixture is a sibling of dashboard-grid.html, extended for the
-       Grafana-grid KPI polish (#316) DOM/CSS contract that harness doesn't
+  <!-- #340: this fixture is a sibling of dashboard-grid.html, extended for the
+       Grafana-grid KPI DOM/CSS contract that harness doesn't
        cover: `.is-kpi` footer suppression, the `.is-kpi.is-view` frameless
        treatment, `role=group`/aria-label on the tile card itself, the
        equal-width `.dash-tile-body` KPI card grid, container-aware value
@@ -94,7 +94,7 @@ <h2>real-viewport 360px overflow + one-per-row check</h2>
     //    tile in BOTH modes (reconcileGrafanaGrid comment: "set in edit mode
     //    too — harmless");
     //  - `.is-view` is the static per-load readOnly class (ensureTileEl);
-    //  - grip/delete/resize are built ONLY in edit mode (never merely CSS-hidden).
+    //  - delete/resize are built ONLY in edit mode; KPI tiles never build a grip.
     function buildTile({ id, title, heightUnits, isKpi }, mode) {
       const readOnly = mode === 'view';
       const card = document.createElement('div');
@@ -106,10 +106,10 @@ <h2>real-viewport 360px overflow + one-per-row check</h2>
       const head = document.createElement('div');
       head.className = 'dash-tile-head';
       let grip = null;
-      if (!readOnly) {
+      if (!readOnly && !isKpi) {
         grip = document.createElement('span');
         grip.className = 'dash-gg-grip';
-        grip.title = 'Drag to reorder';
+        grip.title = 'Drag to move (or Command/Ctrl-drag the tile)';
         grip.setAttribute('aria-hidden', 'true');
         head.appendChild(grip);
       }
@@ -139,9 +139,11 @@ <h2>real-viewport 360px overflow + one-per-row check</h2>
 
       let resizeHandle = null;
       if (!readOnly) {
-        resizeHandle = document.createElement('div');
+        resizeHandle = document.createElement('button');
+        resizeHandle.type = 'button';
         resizeHandle.className = 'dash-gg-resize';
         resizeHandle.title = 'Resize';
+        resizeHandle.setAttribute('aria-label', 'Resize');
         card.appendChild(resizeHandle);
       }
       return { card, head, body, foot, grip, delBtn, resizeHandle };
diff --git a/tests/e2e/dashboard-grid-kpi.spec.js b/tests/e2e/dashboard-grid-kpi.spec.js
index ee6e66e..cacb25d 100644
--- a/tests/e2e/dashboard-grid-kpi.spec.js
+++ b/tests/e2e/dashboard-grid-kpi.spec.js
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-// Grafana-grid KPI tile polish (#316): real-browser coverage for what
+// Grafana-grid KPI tile presentation (#340): real-browser coverage for what
 // happy-dom cannot see — actual geometry (footer collapse, frameless view
 // mode, equal-width card wrapping, container-query value typography, delta
 // bottom-alignment, and the 12/6/4/2 responsive column clamp applied to a
@@ -14,8 +14,8 @@ async function openWide(page) {
   await page.waitForFunction(() => window.__ready === true);
 }
 
-test.describe('Dashboard grafana-grid KPI tiles (#316)', () => {
-  test('edit mode: KPI tile footer is collapsed (no visible line) while a normal tile keeps its visible footer', async ({ page }) => {
+test.describe('Dashboard grafana-grid KPI tiles (#340)', () => {
+  test('edit mode: KPI tile is normally frameless with no grip/footer while a normal tile keeps its shell', async ({ page }) => {
     await openWide(page);
     const kpiFoot = page.locator('#editcmp-grid [data-tile-id="kpi-edit"] .dash-tile-foot');
     const normalFoot = page.locator('#editcmp-grid [data-tile-id="normal-edit"] .dash-tile-foot');
@@ -30,14 +30,54 @@ test.describe('Dashboard grafana-grid KPI tiles (#316)', () => {
     expect(normalFootBox.height).toBeGreaterThan(0);
     expect(await normalFoot.evaluate((node) => getComputedStyle(node).display)).toBe('flex');
 
-    // The KPI edit tile still has its header + edit affordances (title, grip,
-    // remove, resize) — only the footer is suppressed.
+    // The structural wrapper keeps overlay edit affordances, but no persistent
+    // header/grip. Delete and resize remain in the DOM and keyboard reachable.
     const kpiCard = page.locator('#editcmp-grid [data-tile-id="kpi-edit"]');
-    await expect(kpiCard.locator('.dash-tile-head')).toBeVisible();
+    const normal = await kpiCard.evaluate((node) => {
+      const cs = getComputedStyle(node);
+      return { border: cs.borderTopColor, bg: cs.backgroundColor, radius: cs.borderRadius, shadow: cs.boxShadow };
+    });
+    expect(normal).toEqual({ border: 'rgba(0, 0, 0, 0)', bg: 'rgba(0, 0, 0, 0)', radius: '0px', shadow: 'none' });
+    expect(await kpiCard.locator('.dash-tile-head').evaluate((node) => getComputedStyle(node).opacity)).toBe('0');
     await expect(kpiCard.locator('.dash-tile-name')).toHaveText('Active users');
-    await expect(kpiCard.locator('.dash-gg-grip')).toHaveCount(1);
+    await expect(kpiCard.locator('.dash-gg-grip')).toHaveCount(0);
     await expect(kpiCard.locator('.dash-gg-del')).toHaveCount(1);
     await expect(kpiCard.locator('.dash-gg-resize')).toHaveCount(1);
+    await expect(kpiCard.locator('button.dash-gg-resize')).toHaveCount(1);
+    expect(await kpiCard.locator('.dash-tile-body').evaluate((node) => getComputedStyle(node).padding)).toBe('0px');
+  });
+
+  test('hover, focus, modifier hover, move, and resize expose overlay chrome without layout shift', async ({ page }) => {
+    await openWide(page);
+    const card = page.locator('#editcmp-grid [data-tile-id="kpi-edit"]');
+    const head = card.locator('.dash-tile-head');
+    const del = card.locator('.dash-gg-del');
+    const resize = card.locator('.dash-gg-resize');
+    const before = await card.evaluate((node) => ({ w: node.getBoundingClientRect().width, h: node.getBoundingClientRect().height }));
+
+    await card.hover();
+    await expect(head).toBeVisible();
+    const hoveredOutline = await card.evaluate((node) => getComputedStyle(node, '::before').outlineColor);
+    expect(hoveredOutline).not.toBe('rgba(0, 0, 0, 0)');
+    expect(await card.evaluate((node) => ({ w: node.getBoundingClientRect().width, h: node.getBoundingClientRect().height }))).toEqual(before);
+
+    await page.mouse.move(0, 0);
+    await del.focus();
+    await expect(head).toBeVisible();
+    await expect(del).toBeFocused();
+    await resize.focus();
+    await expect(resize).toBeFocused();
+
+    await page.keyboard.down('Control');
+    await card.hover();
+    await expect(head).toBeVisible();
+    await page.keyboard.up('Control');
+
+    await card.evaluate((node) => node.classList.add('dash-floating'));
+    expect(await card.evaluate((node) => getComputedStyle(node, '::before').outlineWidth)).toBe('2px');
+    await card.evaluate((node) => { node.classList.remove('dash-floating'); node.classList.add('dash-gg-resizing'); });
+    expect(await card.evaluate((node) => getComputedStyle(node, '::before').outlineWidth)).toBe('2px');
+    expect(await card.evaluate((node) => ({ w: node.getBoundingClientRect().width, h: node.getBoundingClientRect().height }))).toEqual(before);
   });
 
   test('view mode: KPI tile is frameless (transparent border/background, hidden header) while a normal tile keeps its frame', async ({ page }) => {
@@ -53,7 +93,7 @@ test.describe('Dashboard grafana-grid KPI tiles (#316)', () => {
     expect(kpiStyle.bg).toBe('rgba(0, 0, 0, 0)');
     expect(kpiStyle.radius).toBe('0px');
     expect(kpiStyle.shadow).toBe('none');
-    await expect(kpiCard.locator('.dash-tile-head')).toBeHidden();
+    expect(await kpiCard.locator('.dash-tile-head').evaluate((node) => getComputedStyle(node).opacity)).toBe('0');
     expect(await kpiCard.locator('.dash-tile-body').evaluate((node) => getComputedStyle(node).padding)).toBe('0px');
 
     // Accessible group name survives the hidden header.
@@ -257,7 +297,7 @@ test.describe('Dashboard grafana-grid KPI tiles (#316)', () => {
       });
       expect(style.border).toBe('rgba(0, 0, 0, 0)');
       expect(style.bg).toBe('rgba(0, 0, 0, 0)');
-      await expect(kpiCard.locator('.dash-tile-head')).toBeHidden();
+      expect(await kpiCard.locator('.dash-tile-head').evaluate((node) => getComputedStyle(node).opacity)).toBe('0');
     }
   });
 });
diff --git a/tests/e2e/dashboard-kpi-move.html b/tests/e2e/dashboard-kpi-move.html
new file mode 100644
index 0000000..9c79c64
--- /dev/null
+++ b/tests/e2e/dashboard-kpi-move.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Dashboard KPI movement (#340)</title>
+  <link rel="stylesheet" href="/src/styles.css" />
+  <style>#surface { width: 380px; }</style>
+</head>
+<body data-theme="dark">
+  <main id="surface"></main>
+  <script type="importmap">
+    { "imports": {
+      "@preact/signals-core": "/node_modules/@preact/signals-core/dist/signals-core.mjs",
+      "marked": "/node_modules/marked/lib/marked.esm.js",
+      "@codemirror/state": "/node_modules/@codemirror/state/dist/index.js",
+      "@codemirror/view": "/node_modules/@codemirror/view/dist/index.js",
+      "@codemirror/commands": "/node_modules/@codemirror/commands/dist/index.js",
+      "@codemirror/lang-json": "/node_modules/@codemirror/lang-json/dist/index.js",
+      "@codemirror/language": "/node_modules/@codemirror/language/dist/index.js",
+      "@codemirror/lang-sql": "/node_modules/@codemirror/lang-sql/dist/index.js",
+      "@codemirror/lang-xml": "/node_modules/@codemirror/lang-xml/dist/index.js",
+      "@codemirror/autocomplete": "/node_modules/@codemirror/autocomplete/dist/index.js",
+      "@codemirror/search": "/node_modules/@codemirror/search/dist/index.js",
+      "@lezer/common": "/node_modules/@lezer/common/dist/index.js",
+      "@lezer/highlight": "/node_modules/@lezer/highlight/dist/index.js",
+      "@lezer/lr": "/node_modules/@lezer/lr/dist/index.js",
+      "@lezer/json": "/node_modules/@lezer/json/dist/index.js",
+      "@lezer/xml": "/node_modules/@lezer/xml/dist/index.js",
+      "style-mod": "/node_modules/style-mod/src/style-mod.js",
+      "w3c-keyname": "/node_modules/w3c-keyname/index.js",
+      "crelt": "/node_modules/crelt/index.js",
+      "@marijn/find-cluster-break": "/node_modules/@marijn/find-cluster-break/src/index.js"
+    } }
+  </script>
+  <script type="module">
+    import { createApp } from '/src/ui/app.js';
+    import { renderDashboard } from '/src/ui/dashboard.js';
+
+    const seed = {
+      storageVersion: 1, id: 'workspace', name: 'Workspace',
+      queries: [
+        { id: 'q1', sql: 'SELECT 111111', specVersion: 1, spec: { name: 'First metric', favorite: true, panel: { cfg: { type: 'kpi' } } } },
+        { id: 'q2', sql: 'SELECT 222222', specVersion: 1, spec: { name: 'Second metric', favorite: true, panel: { cfg: { type: 'kpi' } } } },
+      ],
+      dashboard: {
+        documentVersion: 1, id: 'dashboard', title: 'KPI movement', revision: 1,
+        layout: { type: 'flow', version: 1, preset: 'report', items: {} }, filters: [],
+        tiles: [{ id: 't1', queryId: 'q1' }, { id: 't2', queryId: 'q2' }],
+      },
+    };
+    const root = document.querySelector('#surface');
+    const app = createApp({ root, broadcastChannel: () => null });
+    app.conn.ensureFreshToken = async () => true;
+    app.conn.chCtx.onSignedOut = () => {};
+    app.exec.executeRead = async (result, opts) => {
+      const second = String(opts.sql).includes('222222');
+      result.columns = second
+        ? [{ name: 'second_metric', type: 'UInt64' }]
+        : [{ name: 'first_a', type: 'UInt64' }, { name: 'first_b', type: 'UInt64' }, { name: 'first_c', type: 'UInt64' }];
+      result.rows = [second ? [222222] : [111111, 111112, 111113]];
+      result.progress = { rows: 1, bytes: 1 };
+      result.error = null;
+      return result;
+    };
+    await app.workspace.clearCurrent();
+    const seeded = await app.workspace.commit(seed);
+    if (!seeded.ok) throw new Error(seeded.diagnostics[0]?.message || 'seed failed');
+    app.applyCommittedWorkspace(seeded.workspace);
+    const realCommit = app.workspace.commit.bind(app.workspace);
+    window.__commitCount = 0;
+    app.workspace.commit = async (...args) => { window.__commitCount += 1; return realCommit(...args); };
+    window.__workspace = () => app.workspace.loadCurrent();
+    await renderDashboard(app);
+    window.__ready = true;
+  </script>
+</body>
+</html>
diff --git a/tests/e2e/dashboard-kpi-move.spec.js b/tests/e2e/dashboard-kpi-move.spec.js
new file mode 100644
index 0000000..fa0c0d8
--- /dev/null
+++ b/tests/e2e/dashboard-kpi-move.spec.js
@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test';
+
+async function open(page) {
+  await page.setViewportSize({ width: 1200, height: 800 });
+  await page.goto('/tests/e2e/dashboard-kpi-move.html');
+  await page.waitForFunction(() => window.__ready === true);
+  await expect(page.locator('.dash-kpi-member')).toHaveCount(2);
+}
+
+test.describe('Dashboard flow KPI movement (#340)', () => {
+  test('plain drag selects KPI text and never commits movement', async ({ page }) => {
+    await open(page);
+    const value = page.locator('.dash-kpi-member').first().locator('.kpi-value-number').first();
+    const box = await value.boundingBox();
+    await page.mouse.move(box.x + 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width - 2, box.y + box.height / 2, { steps: 5 });
+    await page.mouse.up();
+    expect(await page.evaluate(() => String(getSelection()).length)).toBeGreaterThan(0);
+    expect(await page.evaluate(() => window.__commitCount)).toBe(0);
+    expect(await page.evaluate(async () => (await window.__workspace()).dashboard.tiles.map((tile) => tile.id))).toEqual(['t1', 't2']);
+  });
+
+  test('Control-drag floats the complete KPI member and commits one move', async ({ page }) => {
+    await open(page);
+    const members = page.locator('.dash-kpi-member');
+    await expect(page.locator('.dash-kpi-band .dash-gg-grip')).toHaveCount(0);
+    await expect(members.first().locator('.kpi-card')).toHaveCount(3);
+    // At the fixture's 380px surface, the first query wraps 2+1 and the second
+    // query occupies the lower-right hole in the first member's union box.
+    const third = await members.first().locator('.kpi-card').nth(2).boundingBox();
+    const secondQuery = await members.nth(1).locator('.kpi-card').boundingBox();
+    expect(Math.abs(third.y - secondQuery.y)).toBeLessThan(2);
+    expect(secondQuery.x).toBeGreaterThan(third.x);
+    // A normal `.dash-kpi-member` is display:contents, so the pointer starts
+    // from its visible child card; the event bubbles to the member gesture host.
+    const from = await members.first().locator('.kpi-card').first().boundingBox();
+    const to = await members.nth(1).locator('.kpi-card').boundingBox();
+    await page.keyboard.down('Control');
+    await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(from.x + from.width / 2 + 10, from.y + from.height / 2, { steps: 2 });
+    await expect(members.first()).toHaveClass(/dash-floating/);
+    const floating = await members.first().evaluate((node) => ({ position: getComputedStyle(node).position, w: node.getBoundingClientRect().width, h: node.getBoundingClientRect().height }));
+    expect(floating.position).toBe('fixed');
+    expect(floating.w).toBeGreaterThan(0);
+    expect(floating.h).toBeGreaterThan(0);
+    const containment = await members.first().evaluate((node) => {
+      const outer = node.getBoundingClientRect();
+      return [...node.children].every((child) => {
+        const box = child.getBoundingClientRect();
+        return box.left >= outer.left - 1 && box.right <= outer.right + 1
+          && box.top >= outer.top - 1 && box.bottom <= outer.bottom + 1;
+      });
+    });
+    expect(containment).toBe(true);
+    await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2, { steps: 5 });
+    await page.mouse.up();
+    await page.keyboard.up('Control');
+    await expect.poll(() => page.evaluate(() => window.__commitCount)).toBe(1);
+    expect(await page.evaluate(async () => (await window.__workspace()).dashboard.tiles.map((tile) => tile.id))).toEqual(['t2', 't1']);
+  });
+});
diff --git a/tests/unit/dashboard.test.ts b/tests/unit/dashboard.test.ts
index 9094d85..48370e5 100644
--- a/tests/unit/dashboard.test.ts
+++ b/tests/unit/dashboard.test.ts
@@ -354,15 +354,26 @@ const pickLayout = (root: ParentNode | null, value: string): void => {
 // core/tile-reorder.ts) — so a pointer-drag test must stub real geometry
 // first. Card `i` occupies a distinct, non-overlapping box:
 // x:[i*200, i*200+150], y:[0,50].
-function stubTileRects(cards: HTMLElement[]): void {
+function stubTileRects(cards: HTMLElement[], offset = 0): void {
   cards.forEach((card, i) => {
+    const slot = i + offset;
     const rect = {
-      left: i * 200, right: i * 200 + 150, top: 0, bottom: 50, width: 150, height: 50, x: i * 200, y: 0,
+      left: slot * 200, right: slot * 200 + 150, top: 0, bottom: 50, width: 150, height: 50, x: slot * 200, y: 0,
       toJSON: () => ({}),
     } as DOMRect;
     card.getBoundingClientRect = () => rect;
   });
 }
+function stubKpiMemberRects(members: HTMLElement[]): void {
+  members.forEach((member, i) => {
+    const left = i * 200;
+    const child = qs<HTMLElement>(member, '.kpi-card, .dash-kpi-state-card');
+    child.getBoundingClientRect = () => ({
+      left, right: left + 150, top: 0, bottom: 50, width: 150, height: 50, x: left, y: 0,
+      toJSON: () => ({}),
+    }) as DOMRect;
+  });
+}
 /** The center point of `stubTileRects`'s rect for card index `i` — always
  *  inside that card's rect and outside every other stubbed card's rect. */
 const tileCenter = (i: number): { x: number; y: number } => ({ x: i * 200 + 75, y: 25 });
@@ -740,6 +751,45 @@ describe('renderDashboard — reorder (Command/Ctrl pointer-drag) + sort (#153/#
     expect(qs(app.root, '.dash-grid')?.classList.contains('dash-reordering')).toBe(false);
   });
 
+  it('lost pointer capture and a route rerender both cancel active movement and release gesture ownership', async () => {
+    const { app, commit } = dashApp({ workspace: twoTiles() });
+    await render(app);
+    let cards = qsa<HTMLElement>(app.root, '.dash-tile');
+    stubTileRects(cards);
+    qs(app.root, '.dash-topbar').remove(); // auto-scroll target also supports no sticky chrome
+    const setCapture = vi.fn();
+    const releaseCapture = vi.fn();
+    cards[0].setPointerCapture = setCapture;
+    cards[0].hasPointerCapture = () => true;
+    cards[0].releasePointerCapture = releaseCapture;
+    const start = tileCenter(0);
+    cards[0].dispatchEvent(new PointerEvent('pointerdown', {
+      bubbles: true, cancelable: true, button: 0, pointerId: 7,
+      clientX: start.x, clientY: start.y, metaKey: true,
+    }));
+    window.dispatchEvent(new PointerEvent('pointermove', { pointerId: 7, clientX: start.x + 10, clientY: start.y }));
+    expect(setCapture).toHaveBeenCalledWith(7);
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(cards[0].classList.contains('dash-floating')).toBe(true); // only Escape cancels
+    cards[0].dispatchEvent(new PointerEvent('lostpointercapture', { pointerId: 7 }));
+    expect(cards[0].classList.contains('dash-floating')).toBe(false);
+    expect(releaseCapture).toHaveBeenCalledWith(7);
+
+    // Arm a second gesture and rerender the route while it is active. The
+    // module-level teardown hook must synchronously cancel the old listeners.
+    cards = qsa<HTMLElement>(app.root, '.dash-tile');
+    stubTileRects(cards);
+    cards[0].dispatchEvent(new PointerEvent('pointerdown', {
+      bubbles: true, cancelable: true, button: 0, pointerId: 8,
+      clientX: start.x, clientY: start.y, metaKey: true,
+    }));
+    window.dispatchEvent(new PointerEvent('pointermove', { pointerId: 8, clientX: start.x + 10, clientY: start.y }));
+    expect(cards[0].classList.contains('dash-floating')).toBe(true);
+    await render(app);
+    expect(cards[0].classList.contains('dash-floating')).toBe(false);
+    expect(commit).not.toHaveBeenCalled();
+  });
+
   it('the dragged tile floats (position:fixed) and its transform follows the pointer during a flow drag', async () => {
     const { app } = dashApp({ workspace: twoTiles() });
     await render(app);
@@ -823,7 +873,7 @@ describe('renderDashboard — reorder (Command/Ctrl pointer-drag) + sort (#153/#
     expect(commit).toHaveBeenCalledTimes(1);
   });
 
-  it('a flow-engine KPI tile (detached card) is skipped from drop hit-testing (#332)', async () => {
+  it('a flow-engine KPI member participates in modifier movement and destination hit-testing (#340)', async () => {
     const { app, commit } = dashApp({
       responder: () => ({ columns: [{ name: 'k', type: 'String' }], rows: [['x']] }),
       workspace: wsWith({
@@ -837,16 +887,21 @@ describe('renderDashboard — reorder (Command/Ctrl pointer-drag) + sort (#153/#
       }),
     });
     await render(app);
-    // The KPI tile renders inside the band; only the two table tiles are
-    // attached `.dash-tile` cards. The KPI tile's detached card must be skipped
-    // when capturing rects (its {0,0,0,0} rect would otherwise be a phantom
-    // drop target) — the drag between the two real tiles still works.
+    // The KPI tile renders through its `.dash-kpi-member`, not the detached
+    // cached `.dash-tile`. Its rendered host is now the movement surface and
+    // the hit-test rect for canonical ordering.
     const cards = qsa(app.root, '.dash-tile');
     expect(cards.length).toBe(2);
-    stubTileRects(cards);
-    dragTile(cards, 0, 1);
+    const member = qs<HTMLElement>(app.root, '.dash-kpi-member');
+    const surfaces = [member, ...cards];
+    stubKpiMemberRects([member]);
+    stubTileRects(cards, 1);
+    const down = pointerDragTo(surfaces, 0, tileCenter(2), { metaKey: true });
+    expect(down.defaultPrevented).toBe(true);
     await flush();
     expect(commit).toHaveBeenCalledTimes(1);
+    expect(commit.mock.calls[0][0].dashboard?.tiles.map((tile) => tile.id)).toEqual(['t1', 't2', 't0']);
+    expect(qsa(app.root, '.dash-kpi-member')).toHaveLength(1); // band regrouped after commit
   });
 
   it('read-only dashboard: ⌘-drag does not move and no drag listeners are wired', async () => {
@@ -1142,6 +1197,129 @@ describe('renderDashboard — KPI bands (#240)', () => {
     for (const member of members) expect(member.getAttribute('data-tile')).toBeTruthy();
     expect(qsa(app.root, '.dash-kpi-stream .kpi-card').length).toBe(2);
     for (const member of members) expect(qsa(member, '.kpi-card').length).toBe(1);
+    for (const member of members) {
+      expect(member.getAttribute('role')).toBe('group');
+      expect(member.getAttribute('aria-label')).toMatch(/^k[12]$/);
+    }
+    expect(qs(app.root, '.dash-kpi-band .dash-gg-grip')).toBeNull();
+  });
+
+  it.each(['report', 'columns-2', 'columns-3'] as const)(
+    'moves a KPI-band member with Command-drag in %s and commits once',
+    async (preset) => {
+      const { app, commit } = dashApp({
+        responder: () => ({ columns: [{ name: 'value', type: 'UInt64' }], rows: [[42]] }),
+        workspace: wsWith({
+          queries: [
+            q('k1', 'SELECT 1 AS value', { panel: { cfg: { type: 'kpi' } } }),
+            q('k2', 'SELECT 2 AS value', { panel: { cfg: { type: 'kpi' } } }),
+          ],
+          tiles: [{ id: 't1', queryId: 'k1' }, { id: 't2', queryId: 'k2' }],
+          layout: { type: 'flow', version: 1, preset, items: {} },
+        }),
+      });
+      await render(app);
+      const members = qsa<HTMLElement>(app.root, '.dash-kpi-member');
+      stubKpiMemberRects(members);
+      pointerDragTo(members, 1, tileCenter(0), { metaKey: true });
+      await flush();
+      expect(commit).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls[0][0].dashboard?.tiles.map((tile) => tile.id)).toEqual(['t2', 't1']);
+      expect(qsa<HTMLElement>(app.root, '.dash-kpi-member').map((member) => member.dataset.tile)).toEqual(['t2', 't1']);
+    },
+  );
+
+  it('plain KPI text drag remains selection-owned and dispatches no move', async () => {
+    const { app, commit } = dashApp({
+      responder: () => ({ columns: [{ name: 'value', type: 'UInt64' }], rows: [[42]] }),
+      workspace: wsWith({
+        queries: [q('k1', 'SELECT 1 AS value', { panel: { cfg: { type: 'kpi' } } }), q('k2', 'SELECT 2 AS value', { panel: { cfg: { type: 'kpi' } } })],
+        tiles: [{ id: 't1', queryId: 'k1' }, { id: 't2', queryId: 'k2' }],
+      }),
+    });
+    await render(app);
+    const members = qsa<HTMLElement>(app.root, '.dash-kpi-member');
+    stubKpiMemberRects(members);
+    const value = qs<HTMLElement>(members[0], '.kpi-value');
+    const start = tileCenter(0);
+    const down = new PointerEvent('pointerdown', {
+      bubbles: true, cancelable: true, button: 0, clientX: start.x, clientY: start.y,
+    });
+    value.dispatchEvent(down);
+    window.dispatchEvent(new PointerEvent('pointermove', { clientX: tileCenter(1).x, clientY: tileCenter(1).y }));
+    window.dispatchEvent(new PointerEvent('pointerup', { clientX: tileCenter(1).x, clientY: tileCenter(1).y }));
+    expect(down.defaultPrevented).toBe(false);
+    expect(commit).not.toHaveBeenCalled();
+    expect(members[0].classList.contains('dash-floating')).toBe(false);
+  });
+
+  it('a moving display:contents KPI member gets a measured temporary box and cancellation restores every style', async () => {
+    const { app, commit } = dashApp({
+      responder: () => ({ columns: [{ name: 'value', type: 'UInt64' }], rows: [[42]] }),
+      workspace: wsWith({
+        queries: [q('k1', 'SELECT 1 AS value', { panel: { cfg: { type: 'kpi' } } }), q('k2', 'SELECT 2 AS value', { panel: { cfg: { type: 'kpi' } } })],
+        tiles: [{ id: 't1', queryId: 'k1' }, { id: 't2', queryId: 'k2' }],
+      }),
+    });
+    await render(app);
+    const members = qsa<HTMLElement>(app.root, '.dash-kpi-member');
+    stubKpiMemberRects(members);
+    const original = window.getComputedStyle.bind(window);
+    const styleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
+      const style = original(el);
+      return el === members[0] ? new Proxy(style, { get: (target, key) => key === 'display' ? 'contents' : Reflect.get(target, key) }) : style;
+    });
+    const start = tileCenter(0);
+    members[0].dispatchEvent(new PointerEvent('pointerdown', {
+      bubbles: true, cancelable: true, button: 0, clientX: start.x, clientY: start.y, metaKey: true,
+    }));
+    window.dispatchEvent(new PointerEvent('pointermove', { clientX: start.x + 10, clientY: start.y + 5 }));
+    expect(members[0].classList.contains('dash-floating')).toBe(true);
+    expect(members[0].style.display).toBe('flex');
+    expect(members[0].style.width).toBe('150px');
+    expect(members[0].style.height).toBe('50px');
+    window.dispatchEvent(new PointerEvent('pointercancel'));
+    expect(members[0].classList.contains('dash-floating')).toBe(false);
+    expect(members[0].getAttribute('style') ?? '').toBe('');
+    expect(commit).not.toHaveBeenCalled();
+    styleSpy.mockRestore();
+  });
+
+  it('hit-tests the individual cards of a wrapped multi-card KPI member, not the empty holes in their union', async () => {
+    const { app, commit } = dashApp({
+      responder: (sql) => sql.includes('multi')
+        ? { columns: [{ name: 'a', type: 'UInt64' }, { name: 'b', type: 'UInt64' }], rows: [[1, 2]] }
+        : { columns: [{ name: 'c', type: 'UInt64' }], rows: [[3]] },
+      workspace: wsWith({
+        queries: [
+          q('k1', 'SELECT multi', { panel: { cfg: { type: 'kpi' } } }),
+          q('k2', 'SELECT single', { panel: { cfg: { type: 'kpi' } } }),
+        ],
+        tiles: [{ id: 't1', queryId: 'k1' }, { id: 't2', queryId: 'k2' }],
+      }),
+    });
+    await render(app);
+    const [multi, single] = qsa<HTMLElement>(app.root, '.dash-kpi-member');
+    const multiCards = qsa<HTMLElement>(multi, '.kpi-card');
+    expect(multiCards).toHaveLength(2);
+    // The union of these two wrapped cards is x:0..350/y:0..150. The single
+    // tile occupies the otherwise-empty lower-right hole in that union.
+    const rect = (left: number, top: number): DOMRect => ({
+      left, right: left + 150, top, bottom: top + 50, width: 150, height: 50, x: left, y: top,
+      toJSON: () => ({}),
+    }) as DOMRect;
+    multiCards[0].getBoundingClientRect = () => rect(200, 0);
+    multiCards[1].getBoundingClientRect = () => rect(0, 100);
+    qs<HTMLElement>(single, '.kpi-card').getBoundingClientRect = () => rect(200, 100);
+    multi.dispatchEvent(new PointerEvent('pointerdown', {
+      bubbles: true, cancelable: true, button: 0, clientX: 275, clientY: 25, metaKey: true,
+    }));
+    window.dispatchEvent(new PointerEvent('pointermove', { clientX: 275, clientY: 125 }));
+    expect(single.classList.contains('dash-drop-target')).toBe(true);
+    window.dispatchEvent(new PointerEvent('pointerup', { clientX: 275, clientY: 125 }));
+    await flush();
+    expect(commit).toHaveBeenCalledTimes(1);
+    expect(commit.mock.calls[0][0].dashboard?.tiles.map((tile) => tile.id)).toEqual(['t2', 't1']);
   });
 
   it('shows a KPI member state card for an errored or unfilled KPI source — error is role=alert, unfilled is role=status, both name their tile (#316)', async () => {
@@ -1343,10 +1521,9 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
     expect(footBack.hidden).toBe(true);
   });
 
-  // #316: the tile shell for a grafana-grid KPI tile — edit mode keeps the
-  // full editing chrome except the footer (which the generic KPI path never
-  // populates); view mode strips every visible frame, leaving only the KPI
-  // cards/state card, behind a still-placed, still-named wrapper.
+  // #340: the tile shell for a grafana-grid KPI tile is frameless in both edit
+  // and view modes. Edit title/delete/resize chrome remains in the DOM as an
+  // overlay, but KPI movement is modifier-only and therefore has no grip.
   const kpiGridWs = () => wsWith({
     queries: [q('k1', 'SELECT 1 AS value', { panel: { cfg: { type: 'kpi' } } })],
     tiles: [{ id: 't1', queryId: 'k1' }],
@@ -1354,22 +1531,53 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
   });
   const kpiResponder: ExecResponder = () => ({ columns: [{ name: 'value', type: 'UInt64' }], rows: [[42]] });
 
-  it('edit mode: a KPI grid tile keeps its header and edit controls but hides the footer (#316)', async () => {
+  it('edit mode: a KPI grid tile has overlay controls, no grip, a named structural wrapper, and no footer (#340)', async () => {
     const { app } = dashApp({ responder: kpiResponder, workspace: kpiGridWs() });
     await render(app);
     const card = qs<HTMLElement>(app.root, '.dash-gg-tile');
     expect(card.classList.contains('is-kpi')).toBe(true);
     expect(card.classList.contains('is-view')).toBe(false); // edit mode — not the view-mode modifier
-    expect(qs(card, '.dash-tile-head')).not.toBeNull(); // header retained
+    expect(qs(card, '.dash-tile-head')).not.toBeNull(); // overlay host retained
     expect(qs(card, '.dash-tile-name')?.textContent).toBe('k1');
-    expect(qs(card, '.dash-gg-grip')).not.toBeNull(); // drag retained
+    expect(qs(card, '.dash-gg-grip')).toBeNull(); // modifier movement only
     expect(qs(card, '.dash-gg-del')).not.toBeNull(); // remove retained
-    expect(qs(card, '.dash-gg-resize')).not.toBeNull(); // resize retained
+    const resize = qs<HTMLElement>(card, '.dash-gg-resize');
+    expect(resize).not.toBeNull(); // resize retained
+    expect(resize.tagName).toBe('BUTTON');
+    expect(resize.tabIndex).toBe(0);
+    expect(card.getAttribute('role')).toBe('group');
+    expect(card.getAttribute('aria-label')).toBe('k1');
+    expect(card.title).toBe('Command/Ctrl-drag to move');
     const foot = qs<HTMLElement>(card, '.dash-tile-foot');
     expect(foot.hidden).toBe(true); // suppressed at the DOM level, not just visually
     expect(foot.childNodes.length).toBe(0);
   });
 
+  it('grid KPI tiles move only with a modifier body drag and commit exactly once (#340)', async () => {
+    const { app, commit } = dashApp({
+      responder: kpiResponder,
+      workspace: wsWith({
+        queries: [
+          q('k1', 'SELECT 1 AS value', { panel: { cfg: { type: 'kpi' } } }),
+          q('k2', 'SELECT 2 AS value', { panel: { cfg: { type: 'kpi' } } }),
+        ],
+        tiles: [{ id: 't1', queryId: 'k1' }, { id: 't2', queryId: 'k2' }],
+        layout: { type: 'grafana-grid', version: 1, items: {} },
+      }),
+    });
+    await render(app);
+    const cards = qsa<HTMLElement>(app.root, '.dash-gg-tile');
+    stubTileRects(cards);
+    expect(qsa(app.root, '.dash-gg-grip')).toHaveLength(0);
+    const plain = pointerDragTo(cards, 0, tileCenter(1), {});
+    expect(plain.defaultPrevented).toBe(false);
+    expect(commit).not.toHaveBeenCalled();
+    gridDrag(cards, 0, 1, { viaGrip: false });
+    await flush();
+    expect(commit).toHaveBeenCalledTimes(1);
+    expect(commit.mock.calls[0][0].dashboard?.tiles.map((tile) => tile.id)).toEqual(['t2', 't1']);
+  });
+
   it('a non-KPI grid tile keeps its footer visible and populated (#316 — the KPI-only fix leaves ordinary tiles alone)', async () => {
     const { app } = dashApp({ workspace: twoTilesGrid() }); // q1/q2 — ordinary (non-KPI) queries
     await render(app);
@@ -1534,6 +1742,9 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
     Object.defineProperty(gridEl, 'clientWidth', { value: 1200, configurable: true });
     const card = qsa<HTMLElement>(app.root, '.dash-gg-tile')[0]; // t1, starts span 4 / height unit 1 (120px), colStart 0
     const handle = qs<HTMLElement>(card, '.dash-gg-resize');
+    const secondary = new PointerEvent('pointerdown', { button: 2, clientX: 0, clientY: 0, cancelable: true });
+    handle.dispatchEvent(secondary);
+    expect(secondary.defaultPrevented).toBe(false);
     handle.dispatchEvent(new PointerEvent('pointerdown', { clientX: 0, clientY: 0 }));
     expect(card.classList.contains('dash-gg-resizing')).toBe(true);
     // #291 review F3: the tile is PINNED to its rendered colStart (0 here) for
@@ -1559,6 +1770,106 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
     expect((after.style as CSSStyleDeclaration).height).toBe('296px');
   });
 
+  it.each(['pointercancel', 'blur', 'Escape', 'lostpointercapture', 'rerender'] as const)(
+    'a resize cancelled by %s restores placement and never commits later',
+    async (reason) => {
+      const { app, commit } = dashApp({ workspace: twoTilesGrid() });
+      await render(app);
+      const gridEl = qs(app.root, '.dash-gg-grid');
+      Object.defineProperty(gridEl, 'clientWidth', { value: 1200, configurable: true });
+      const card = qsa<HTMLElement>(app.root, '.dash-gg-tile')[0];
+      const handle = qs<HTMLElement>(card, '.dash-gg-resize');
+      const release = vi.fn();
+      handle.setPointerCapture = vi.fn();
+      handle.hasPointerCapture = () => true;
+      handle.releasePointerCapture = release;
+      handle.dispatchEvent(new PointerEvent('pointerdown', { button: 0, pointerId: 9, clientX: 0, clientY: 0 }));
+      window.dispatchEvent(new PointerEvent('pointermove', { pointerId: 9, clientX: 600, clientY: 280 }));
+      expect(card.classList.contains('dash-gg-resizing')).toBe(true);
+      if (reason === 'pointercancel') window.dispatchEvent(new PointerEvent('pointercancel', { pointerId: 9 }));
+      else if (reason === 'blur') window.dispatchEvent(new Event('blur'));
+      else if (reason === 'Escape') document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      else if (reason === 'lostpointercapture') handle.dispatchEvent(new PointerEvent('lostpointercapture', { pointerId: 9 }));
+      else await render(app);
+      expect(card.classList.contains('dash-gg-resizing')).toBe(false);
+      expect(card.style.gridColumn).toBe('span 4');
+      expect(card.style.height).toBe('120px');
+      expect(release).toHaveBeenCalledWith(9);
+      window.dispatchEvent(new PointerEvent('pointerup', { pointerId: 9 }));
+      await flush();
+      expect(commit).not.toHaveBeenCalled();
+    },
+  );
+
+  it('keyboard arrows resize a focused handle; Full view ignores horizontal arrows', async () => {
+    const { app, commit } = dashApp({ workspace: twoTilesGrid() });
+    await render(app);
+    let handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    const lastPlacement = (): { span: number; height: number } | undefined => {
+      const layout = commit.mock.calls.at(-1)?.[0].dashboard?.layout as { items?: Record<string, { span: number; height: number }> } | undefined;
+      return layout?.items?.t1;
+    };
+    const press = (key: string): KeyboardEvent => {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      handle.dispatchEvent(event);
+      return event;
+    };
+    expect(press('Home').defaultPrevented).toBe(false);
+    expect(press('ArrowRight').defaultPrevented).toBe(true);
+    await flush();
+    expect(lastPlacement()?.span).toBe(5);
+    handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    press('ArrowLeft');
+    await flush();
+    expect(lastPlacement()?.span).toBe(4);
+    handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    press('ArrowDown');
+    await flush();
+    expect(lastPlacement()?.height).toBe(2);
+    handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    press('ArrowUp');
+    await flush();
+    expect(lastPlacement()?.height).toBe(1);
+    handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    const atMinCount = commit.mock.calls.length;
+    expect(press('ArrowUp').defaultPrevented).toBe(true);
+    expect(commit).toHaveBeenCalledTimes(atMinCount);
+
+    pickLayout(app.root, 'full');
+    await flush();
+    handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    const before = commit.mock.calls.length;
+    expect(press('ArrowRight').defaultPrevented).toBe(false);
+    expect(commit).toHaveBeenCalledTimes(before);
+    expect(press('ArrowDown').defaultPrevented).toBe(true);
+    await flush();
+    const fullPlacement = lastPlacement();
+    expect(fullPlacement).toEqual({ span: 4, height: 2 });
+  });
+
+  it('keyboard span resize preserves authored intent under a narrow responsive clamp', async () => {
+    const workspace = wsWith({
+      queries: [q('q1', 'SELECT 1')], tiles: [{ id: 't1', queryId: 'q1' }],
+      layout: { type: 'grafana-grid', version: 1, items: { t1: { span: 12, height: 2 } } },
+    });
+    const { app, commit } = dashApp({ workspace });
+    await render(app);
+    const gridEl = qs<HTMLElement>(app.root, '.dash-gg-grid');
+    Object.defineProperty(gridEl, 'clientWidth', { value: 600, configurable: true }); // effective 4 columns
+    window.dispatchEvent(new Event('resize'));
+    await Promise.resolve(); await Promise.resolve();
+    expect(qs<HTMLElement>(app.root, '.dash-gg-tile').style.gridColumn).toBe('span 4');
+    const handle = qs<HTMLButtonElement>(app.root, '.dash-gg-resize');
+    const right = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
+    handle.dispatchEvent(right);
+    expect(right.defaultPrevented).toBe(true);
+    expect(commit).not.toHaveBeenCalled(); // authored span already at the 12-column maximum
+    handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }));
+    await flush();
+    const layout = commit.mock.calls[0][0].dashboard?.layout as unknown as { items: Record<string, { span: number }> };
+    expect(layout.items.t1.span).toBe(11); // authored 12→11, never effective 4→3
+  });
+
   it('a mid-row tile dragged wider is clamped to the columns remaining at its pinned start, never past the grid edge (#291 review F3)', async () => {
     const { app, commit } = dashApp({ workspace: twoTilesGrid() });
     await render(app);
@@ -1594,6 +1905,9 @@ describe('renderDashboard — grafana-grid engine (#291)', () => {
     await render(app);
     const handle = qs<HTMLElement>(app.root, '.dash-gg-resize');
     handle.dispatchEvent(new PointerEvent('pointerdown', { clientX: 0, clientY: 0 }));
+    const key = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true });
+    handle.dispatchEvent(key);
+    expect(key.defaultPrevented).toBe(false);
     expect(commit).not.toHaveBeenCalled();
   });