@nyaruka/temba-components 0.169.0 → 0.170.1

package/src/list/ContactList.ts

@@ -3,13 +3,19 @@ import { property, state } from 'lit/decorators.js';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
 import { Contact } from '../interfaces';
-import { getUrl } from '../utils';
+import { getUrl, postJSON } from '../utils';
+import { getStore } from '../store/Store';
 
 const FIELD_PREFIX = 'field:';
 
 /** Placeholder shown in any cell whose value is empty. */
 const EMPTY = '--';
 
+/** Ceiling on how many pages of fields we'll walk. The API serves 250
+ * per page, so this is far past any real workspace — it exists only so
+ * an endpoint that keeps handing back a `next` can't spin forever. */
+const MAX_FIELD_PAGES = 20;
+
 /**
  * Contact CRUDL list — drop-in replacement for the rapidpro
  * `contacts/contact_list.html` table. Each row carries a contact
@@ -22,6 +28,11 @@ const EMPTY = '--';
  * {@link ContactList.fieldsEndpoint} on connect; cells read each
  * contact's value out of `item.fields[<key>]`. Date/time fields
  * render as a relative duration, matching the Last-seen column.
+ *
+ * When {@link ContactList.priorityEndpoint} is set the field columns
+ * can be dragged into a new order, which is saved as the workspace's
+ * featured-field order (the list renders featured fields by priority,
+ * so column order and field order are the same thing).
  */
 export class ContactList extends ContentList<Contact> {
   static get styles() {
@@ -45,10 +56,25 @@ export class ContactList extends ContentList<Contact> {
   }
 
   /** Endpoint returning `{ results: ContactField[] }`. Fields where
-   * `featured: true` become extra columns. */
+   * `featured: true` become extra columns.
+   *
+   * The list deliberately fetches fields itself instead of reading the
+   * global store: it has to work standalone (and against a custom
+   * endpoint), and it may mount before any store exists on the page.
+   * The store, when present, is only *told* about changes — see the
+   * refresh after a priority save. The endpoint has no featured filter,
+   * so the fetch pages through all fields and filters client-side. */
   @property({ type: String, attribute: 'fields-endpoint' })
   fieldsEndpoint = '/api/v2/fields.json';
 
+  /** Endpoint accepting `{ featured: [keys...] }` to save featured-field
+   * order (the same one the fields management page posts to). When set,
+   * the field columns become drag-reorderable and a drop saves the new
+   * order org-wide; the host only sets it for users holding the
+   * update-priority permission. */
+  @property({ type: String, attribute: 'priority-endpoint' })
+  priorityEndpoint = '';
+
   /** Anonymous workspaces mask URN values, so instead of the URN
    * column the list shows each contact's ref (served as its own
    * anon-only key by the endpoint). */
@@ -104,7 +130,7 @@ export class ContactList extends ContentList<Contact> {
     // Rebuilding here (rather than in updated()) means a mounted
     // anon attribute is reflected in the first paint instead of
     // flashing the URN header for a frame.
-    if (changes.has('anon')) {
+    if (changes.has('anon') || changes.has('priorityEndpoint')) {
       this.columns = this.buildColumns();
     }
   }
@@ -127,11 +153,27 @@ export class ContactList extends ContentList<Contact> {
     const controller = new AbortController();
     this.pendingFieldsController = controller;
     try {
-      const response = await getUrl(this.fieldsEndpoint, controller);
-      // If the controller has been swapped or cleared, the response
-      // is from a stale request — drop it on the floor.
-      if (this.pendingFieldsController !== controller) return;
-      const all = response.json?.results || [];
+      // The fields API is cursor paginated (250 per page), and the
+      // featured list a drop posts back is authoritative — any featured
+      // field we never read would be silently un-featured org-wide. So
+      // walk every page before deciding what's featured. Nothing is
+      // assigned until the whole walk lands, so a page that fails leaves
+      // the previous (complete) list in place rather than a truncated one.
+      const all: any[] = [];
+      const fetched = new Set<string>();
+      let url: string = this.fieldsEndpoint;
+      for (let page = 0; url && page < MAX_FIELD_PAGES; page++) {
+        // an endpoint whose `next` points back at a page we've already
+        // read would otherwise loop until the page cap
+        if (fetched.has(url)) break;
+        fetched.add(url);
+        const response = await getUrl(url, controller);
+        // If the controller has been swapped or cleared, the response
+        // is from a stale request — drop it on the floor.
+        if (this.pendingFieldsController !== controller) return;
+        all.push(...(response.json?.results || []));
+        url = response.json?.next || '';
+      }
       this.featuredFields = all
         .filter((f: any) => f.featured)
         .sort((a: any, b: any) => (b.priority ?? 0) - (a.priority ?? 0));
@@ -173,7 +215,11 @@ export class ContactList extends ContentList<Contact> {
         sortable: true,
         resizeMinWidth: '40px',
         maxWidth: '200px',
-        resizable: true
+        resizable: true,
+        // Field columns can be dragged into a new order, but only when
+        // the host wired up somewhere to save it — reordering that
+        // silently reverts on reload would read as broken.
+        reorderable: !!this.priorityEndpoint
       })
     );
     // Name + URN are the pinned identity columns and are not
@@ -224,6 +270,64 @@ export class ContactList extends ContentList<Contact> {
     ];
   }
 
+  /** A committed header drag reordered the field columns — keep
+   * featuredFields aligned with the new column order (so any rebuild
+   * preserves it) and save it as the workspace's featured-field order.
+   * Column order maps directly onto priority: leftmost = highest, the
+   * same contract as the fields management page, whose endpoint this
+   * posts to with the full featured list. */
+  protected onColumnOrderChanged(columns: ContentListColumn[]): void {
+    // A fields fetch still in flight was started against the old order
+    // and would land on top of the drop, snapping the columns back with
+    // the new order already on its way to the server.
+    if (this.pendingFieldsController) {
+      this.pendingFieldsController.abort();
+      this.pendingFieldsController = undefined;
+    }
+    const keys = columns
+      .filter((c) => c.key.startsWith(FIELD_PREFIX))
+      .map((c) => c.key.substring(FIELD_PREFIX.length));
+    this.featuredFields = keys
+      .map((key) => (this.featuredFields || []).find((f: any) => f.key === key))
+      .filter(Boolean);
+    if (!this.priorityEndpoint) return;
+    postJSON(this.priorityEndpoint, { featured: keys })
+      .then((response) => {
+        // postUrl only rejects on 5xx, so a 400/403/404 arrives here as a
+        // perfectly resolved promise — the order was never stored and we
+        // have to treat it as the failure it is.
+        if (response.status < 200 || response.status >= 300) {
+          throw response;
+        }
+      })
+      .catch((error) => {
+        console.warn('failed to save featured field order', error);
+        // The list went away while the save was in flight — there are no
+        // columns left to put back, and refetching would only leave a
+        // request outstanding against a detached element.
+        if (!this.isConnected) return;
+        // Nothing made the dragged order durable, so stop showing it —
+        // refetch and fall back on whatever the server still holds. The
+        // success path deliberately doesn't refetch: we already display
+        // exactly what we just saved, and a read-replica answering with
+        // pre-write data would yank the columns back for no reason.
+        this.loadFields();
+      })
+      .finally(() => {
+        // Featured fields are workspace state other components on the
+        // page read from the store (contact details, the fields page),
+        // so its cached copy has to hear about the new order too. Looked
+        // up here rather than cached on connect so a list that mounted
+        // ahead of the store still finds it.
+        getStore()
+          ?.refreshFields()
+          .catch(() => {
+            // a stale store cache is cosmetic and elsewhere; the list
+            // itself is already showing the saved order
+          });
+      });
+  }
+
   protected getRowIcon(_item: Contact): string | null {
     return Icon.contact;
   }

package/src/list/ContentList.ts

@@ -44,6 +44,15 @@ export interface ContentListColumn {
   /** Whether the column can be resized from its trailing edge. Resizing is
    * opt-in so list types can expose it only where the interaction is useful. */
   resizable?: boolean;
+  /** Whether the column can be reordered by dragging its header.
+   * Reorderable columns must form one contiguous run — drags are
+   * constrained to slots inside that run so the system columns on
+   * either side stay put. Takes effect once two or more columns opt
+   * in (there's nothing to reorder against otherwise). The table does
+   * not scroll while a drag is in flight, so dragging beyond the
+   * visible frame isn't supported — drops clamp to the headers on
+   * screen. */
+  reorderable?: boolean;
   /** Optional resize-only floor. Unlike minWidth, this does not affect the
    * table's native layout before the user resizes the column. */
   resizeMinWidth?: string;
@@ -145,24 +154,33 @@ export class ContentList<T = any> extends RapidElement {
         --sort-gutter: 16px;
         /* Selected-row wash — accent-50 on its own reads grey, so a
            touch of the accent-400 rail colour is mixed in to give
-           the selection a faint accent tint. */
-        --cl-selected: color-mix(
-          in oklab,
-          var(--accent-400) 9%,
-          var(--accent-50)
-        );
+           the selection a faint accent tint. Statics pre-mixed from
+           the default accent for browsers without color-mix(); the
+           @supports block below re-derives them from the tokens. */
+        --cl-selected: #e5ecf8;
         /* The dividers bracketing a selected row — the plain grey
            --border reads as a seam against the wash, so this is the
            same accent pushed a little further. */
-        --cl-selected-border: color-mix(
-          in oklab,
-          var(--accent-400) 24%,
-          var(--accent-50)
-        );
+        --cl-selected-border: #cbdaf1;
         /* Tint shared by the frozen (pinned) columns and the header
            row, so the header reads as the same quiet sub-panel as the
            pinned section. */
-        --cl-pin-bg: color-mix(in oklab, var(--sunken) 35%, var(--surface));
+        --cl-pin-bg: #fafbfc;
+      }
+      @supports (color: color-mix(in srgb, red, red)) {
+        :host {
+          --cl-selected: color-mix(
+            in oklab,
+            var(--accent-400) 9%,
+            var(--accent-50)
+          );
+          --cl-selected-border: color-mix(
+            in oklab,
+            var(--accent-400) 24%,
+            var(--accent-50)
+          );
+          --cl-pin-bg: color-mix(in oklab, var(--sunken) 35%, var(--surface));
+        }
       }
       /* fillWindow — take the slack of a height-bounded flex-column
          parent so the table scrolls internally; min-height: 0 (set
@@ -287,7 +305,14 @@ export class ContentList<T = any> extends RapidElement {
         color: var(--danger);
       }
       .bulk-action.destructive:hover {
-        background: color-mix(in oklab, var(--danger) 20%, white);
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f6d9d9;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .bulk-action.destructive:hover {
+          background: color-mix(in oklab, var(--danger) 20%, white);
+        }
       }
       .bulk-action temba-icon {
         --icon-color: currentColor;
@@ -523,10 +548,16 @@ export class ContentList<T = any> extends RapidElement {
            within the panel padding so row dividers don't bleed full-
            width. */
         margin-right: -20px;
-        /* Contain the sticky header's z-index inside this frame so it
-           can't compete with the page header's content-menu dropdown
-           (also z-index 2), which otherwise paints under the table
-           header by DOM-order tie-break. */
+        /* Keep the table's internal layering (sticky header, pinned
+           columns and their hover/shadow layers, z-index 1-6) inside
+           its own stacking context so those values can only order
+           against each other and never interleave with page-level
+           layers like floating windows or open dropdowns. Without it
+           the frame is z-index auto, so the table's 1-6 would join the
+           nearest ancestor stacking context — normally the root — and
+           tie against page chrome using comparably small values. Note
+           this also caps this list's own label dropdown, which renders
+           inside the frame and so cannot escape it. */
         isolation: isolate;
       }
       .table-scroll {
@@ -767,6 +798,52 @@ export class ContentList<T = any> extends RapidElement {
         cursor: col-resize !important;
       }
 
+      /* Column reorder. A reorderable header is a drag surface: past a
+         small pointer threshold the label lifts into a floating ghost,
+         the origin column dims, and an accent insertion bar tracks the
+         drop slot. touch-action: none lets the same drag work on touch
+         — the 36px sticky header row is a negligible scroll-start
+         surface, so claiming its gestures (including the vertical
+         swipe that would otherwise scroll the list) costs little. */
+      .head-cell.reorderable {
+        touch-action: none;
+      }
+      /* Advertise the drag while idle. The th prefix out-specifies
+         .head-cell.sortable's pointer cursor, which is declared later
+         in this sheet and would otherwise win on a sortable column. */
+      th.head-cell.reorderable {
+        cursor: grab;
+      }
+      .head-cell.dragging {
+        opacity: 0.35;
+      }
+      /* The insertion bar sits flush inside the boundary it marks
+         rather than straddling it — an overhanging bar would be painted
+         over by the neighbouring header cell, which is opaque and wins
+         the stacking order. The header cell is the positioning context
+         (it's position: sticky). */
+      .head-cell.drop-before::before,
+      .head-cell.drop-after::after {
+        content: '';
+        position: absolute;
+        top: 4px;
+        bottom: 4px;
+        width: 3px;
+        border-radius: 2px;
+        background: var(--accent-400);
+        z-index: 5;
+      }
+      .head-cell.drop-before::before {
+        left: 0;
+      }
+      .head-cell.drop-after::after {
+        right: 0;
+      }
+      :host([column-dragging]),
+      :host([column-dragging]) * {
+        cursor: grabbing !important;
+      }
+
       /* Pinned columns stay fixed against their edge while the rest
          of the table scrolls under them. The frozen-region look —
          the tint and the divider — only kicks in once the table
@@ -1488,6 +1565,43 @@ export class ContentList<T = any> extends RapidElement {
       }
     | undefined;
   private previousBodyUserSelect = '';
+
+  /** Active pointer-driven header drag-reorder. The drag only "starts"
+   * once the pointer travels past a small threshold, so a plain click
+   * on a reorderable (and typically sortable) header still sorts. */
+  private columnDrag:
+    | {
+        key: string;
+        pointerId: number;
+        startX: number;
+        grabOffsetX: number;
+        started: boolean;
+        header: HTMLElement;
+        ghost?: HTMLElement;
+      }
+    | undefined;
+
+  /** The drag keeps its own copy of body user-select: a resize started
+   * mid-drag cancels the drag, and sharing one field would let whichever
+   * finished last restore the other's (already overwritten) value. */
+  private previousBodyUserSelectDrag = '';
+
+  /** Pointer travel, in px, that separates a click (sort) from a drag
+   * (reorder). Only horizontal travel counts — that's the axis the
+   * reorder happens on. */
+  private static readonly DRAG_DEAD_ZONE = 5;
+
+  /** Key of the column being drag-reordered, '' when idle — drives the
+   * dimmed treatment on the origin header. */
+  @state()
+  private draggingColumnKey = '';
+
+  /** Insertion slot the drag is currently over: the `columns` index
+   * the dragged column would be inserted before (one past the
+   * reorderable run for an end drop), or -1 when idle. */
+  @state()
+  private columnDropSlot = -1;
+
   private columnWidths: Record<string, number> = {};
   private columnWidthSaveTimeout: ReturnType<typeof setTimeout> = null;
   private suppressHeaderClick = false;
@@ -1610,6 +1724,7 @@ export class ContentList<T = any> extends RapidElement {
       window.removeEventListener('resize', this.resizeHandler);
     }
     this.stopColumnResize();
+    this.cancelColumnDrag();
     if (this.columnWidthSaveTimeout) {
       clearTimeout(this.columnWidthSaveTimeout);
       this.columnWidthSaveTimeout = null;
@@ -2896,9 +3011,11 @@ export class ContentList<T = any> extends RapidElement {
     column: ContentListColumn
   ): void {
     if (event.pointerType === 'mouse' && event.button !== 0) return;
-    // A second pointer should replace, not overlap, an active drag and
-    // must preserve the body's original selection style for cleanup.
+    // A second pointer should replace, not overlap, an active resize or
+    // reorder — both stash the body's selection style, so leaving one
+    // running would strand `user-select: none` on the body.
     this.stopColumnResize();
+    this.cancelColumnDrag();
     event.preventDefault();
     event.stopPropagation();
     const handle = event.currentTarget as HTMLElement;
@@ -2985,6 +3102,212 @@ export class ContentList<T = any> extends RapidElement {
     if (changed) this.scheduleColumnWidthSave();
   };
 
+  /** The contiguous run of reorderable columns as [first, last]
+   * indexes, or null when fewer than two columns opt in. Mirroring the
+   * pinning contract, reorderable columns must be contiguous — drops
+   * are constrained to slots inside this run. */
+  private reorderableRange(): [number, number] | null {
+    const first = this.columns.findIndex((c) => c.reorderable);
+    if (first === -1) return null;
+    let last = first;
+    while (
+      last + 1 < this.columns.length &&
+      this.columns[last + 1].reorderable
+    ) {
+      last++;
+    }
+    return last > first ? [first, last] : null;
+  }
+
+  private headerCellForColumn(key: string): HTMLElement | null {
+    return this.shadowRoot?.querySelector(
+      `th.head-cell[data-key="${CSS.escape(key)}"]`
+    );
+  }
+
+  private startColumnDrag(
+    event: PointerEvent,
+    column: ContentListColumn
+  ): void {
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    if (this.columnResize || this.columnDrag) return;
+    // No range check here: this only ever runs from the @pointerdown
+    // render binds on headers inside the reorderable run.
+    const header = event.currentTarget as HTMLElement;
+    // No preventDefault and no pointer capture yet — until the pointer
+    // clears the dead zone this may still be a plain sort click, which
+    // must reach the header untouched.
+    this.columnDrag = {
+      key: column.key,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      grabOffsetX: event.clientX - header.getBoundingClientRect().left,
+      started: false,
+      header
+    };
+    window.addEventListener('pointermove', this.handleColumnDragMove);
+    window.addEventListener('pointerup', this.stopColumnDrag);
+    window.addEventListener('pointercancel', this.cancelColumnDrag);
+  }
+
+  private handleColumnDragMove = (event: PointerEvent): void => {
+    const drag = this.columnDrag;
+    if (!drag) return;
+    // A second (e.g. touch) pointer must not drive a drag it didn't
+    // start.
+    if (event.pointerId !== drag.pointerId) return;
+    if (!drag.started) {
+      if (Math.abs(event.clientX - drag.startX) < ContentList.DRAG_DEAD_ZONE) {
+        return;
+      }
+      drag.started = true;
+      // Capture so the drag survives excursions outside the window and
+      // the release's synthesized click retargets to the origin header,
+      // where the post-drag suppression can consume it.
+      try {
+        drag.header.setPointerCapture(drag.pointerId);
+      } catch {
+        // synthetic pointers (tests) have no active pointer to capture
+      }
+      drag.ghost = this.createColumnDragGhost(drag.header);
+      this.draggingColumnKey = drag.key;
+      this.previousBodyUserSelectDrag = document.body.style.userSelect;
+      document.body.style.userSelect = 'none';
+      this.toggleAttribute('column-dragging', true);
+    }
+    event.preventDefault();
+    if (drag.ghost) {
+      drag.ghost.style.left = `${event.clientX - drag.grabOffsetX}px`;
+    }
+    this.columnDropSlot = this.computeColumnDropSlot(event.clientX);
+  };
+
+  /** Where a drop at clientX would insert the dragged column: the
+   * `columns` index to insert before, clamped to the reorderable run. */
+  private computeColumnDropSlot(clientX: number): number {
+    const range = this.reorderableRange();
+    if (!range) return -1;
+    const [first, last] = range;
+    let slot = first;
+    for (let i = first; i <= last; i++) {
+      const header = this.headerCellForColumn(this.columns[i].key);
+      if (!header) continue;
+      const rect = header.getBoundingClientRect();
+      if (clientX > rect.left + rect.width / 2) slot = i + 1;
+    }
+    return slot;
+  }
+
+  private stopColumnDrag = (event?: Event): void => {
+    const drag = this.columnDrag;
+    if (!drag) return;
+    // Ignore the release of any pointer other than the one that started
+    // the drag. Teardown paths without an event (disconnect) still run.
+    if (event instanceof PointerEvent && event.pointerId !== drag.pointerId) {
+      return;
+    }
+    const slot = this.columnDropSlot;
+    this.teardownColumnDrag();
+    if (!drag.started) return;
+    // The release retargets a synthesized click at the captured origin
+    // header; consume it so completing a reorder never also re-sorts.
+    if (event?.type === 'pointerup') {
+      this.suppressHeaderClick = true;
+      clearTimeout(this.headerClickSuppressionTimeout);
+      this.headerClickSuppressionTimeout = setTimeout(() => {
+        this.suppressHeaderClick = false;
+        this.headerClickSuppressionTimeout = null;
+      }, 0);
+    }
+    const from = this.columns.findIndex((c) => c.key === drag.key);
+    if (from === -1 || slot < 0) return;
+    const to = slot > from ? slot - 1 : slot;
+    if (to === from) return;
+    const columns = [...this.columns];
+    const [moved] = columns.splice(from, 1);
+    columns.splice(to, 0, moved);
+    this.columns = columns;
+    // Its own event type: the generic OrderChanged is a bubbling,
+    // composed event whose other producers carry different payloads
+    // (`ids`, `swap`), and its listeners would choke on this one.
+    this.fireCustomEvent(CustomEventType.ColumnOrderChanged, {
+      keys: columns.map((c) => c.key),
+      from,
+      to
+    });
+    this.onColumnOrderChanged(columns);
+  };
+
+  /** Abandons the drag without committing a drop. Doubles as the
+   * pointercancel listener (where it only answers to its own pointer)
+   * and as the unconditional cleanup hook for disconnect / resize. */
+  private cancelColumnDrag = (event?: Event): void => {
+    const drag = this.columnDrag;
+    if (!drag) return;
+    if (event instanceof PointerEvent && event.pointerId !== drag.pointerId) {
+      return;
+    }
+    this.teardownColumnDrag();
+  };
+
+  private teardownColumnDrag(): void {
+    const drag = this.columnDrag;
+    this.columnDrag = undefined;
+    this.columnDropSlot = -1;
+    this.draggingColumnKey = '';
+    window.removeEventListener('pointermove', this.handleColumnDragMove);
+    window.removeEventListener('pointerup', this.stopColumnDrag);
+    window.removeEventListener('pointercancel', this.cancelColumnDrag);
+    if (drag?.started) {
+      document.body.style.userSelect = this.previousBodyUserSelectDrag;
+      this.toggleAttribute('column-dragging', false);
+    }
+    drag?.ghost?.remove();
+  }
+
+  /** Called after a header drag commits a new column order. Subclasses
+   * persist it (e.g. the contact list saves featured-field priorities). */
+  protected onColumnOrderChanged(_columns: ContentListColumn[]): void {}
+
+  /** A floating copy of the header label that tracks the pointer during
+   * a reorder. It lives on document.body — outside the shadow root —
+   * so every style is inlined, with literal fallbacks for the design
+   * tokens in case the host page doesn't define them globally. */
+  private createColumnDragGhost(header: HTMLElement): HTMLElement {
+    const rect = header.getBoundingClientRect();
+    const style = getComputedStyle(header);
+    const ghost = document.createElement('div');
+    ghost.className = 'column-drag-ghost';
+    // Purely decorative — it duplicates the header it was lifted from.
+    ghost.setAttribute('aria-hidden', 'true');
+    ghost.textContent =
+      header.querySelector('.label')?.textContent?.trim() ?? '';
+    Object.assign(ghost.style, {
+      position: 'fixed',
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      height: `${rect.height}px`,
+      minWidth: `${rect.width}px`,
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      padding: '0 8px',
+      font: style.font,
+      letterSpacing: style.letterSpacing,
+      textTransform: style.textTransform,
+      color: style.color,
+      background: 'var(--surface, #fff)',
+      border: '1px solid var(--border, #e4e7ec)',
+      borderRadius: 'var(--curvature, 6px)',
+      boxShadow: 'var(--shadow-1, 0 2px 6px rgba(0, 0, 0, 0.12))',
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      zIndex: '10000'
+    });
+    document.body.appendChild(ghost);
+    return ghost;
+  }
+
   /** Arrow keys resize in 10px steps (25px with Shift), providing an
    * accessible equivalent to dragging the separator. */
   private handleColumnResizeKeydown(
@@ -3244,6 +3567,12 @@ export class ContentList<T = any> extends RapidElement {
     const allSelected =
       allIds.length > 0 && allIds.every((id) => this.selectedIds.has(id));
     const someSelected = !allSelected && this.selectedIds.size > 0;
+    // Computed once for the whole row rather than per cell — every
+    // header cell needs both to resolve its reorder affordances.
+    const reorderableRange = this.reorderableRange();
+    const dragFromIndex = this.draggingColumnKey
+      ? this.columns.findIndex((c) => c.key === this.draggingColumnKey)
+      : -1;
 
     return html`
       <thead>
@@ -3281,6 +3610,9 @@ export class ContentList<T = any> extends RapidElement {
             const outerResize = index === this.columns.length - 1;
             return html`${this.renderHeaderCell(
               column,
+              index,
+              reorderableRange,
+              dragFromIndex,
               leadingResizeColumn,
               trailingResize,
               outerResize
@@ -3328,16 +3660,39 @@ export class ContentList<T = any> extends RapidElement {
 
   private renderHeaderCell(
     column: ContentListColumn,
+    index: number,
+    range: [number, number] | null,
+    fromIndex: number,
     leadingResizeColumn?: ContentListColumn,
     trailingResize = false,
     outerResize = false
   ): TemplateResult {
     const active = this.sort === column.key || this.sort === '-' + column.key;
     const desc = this.sort === '-' + column.key;
+    // Reorder affordances: a column is only draggable when it sits in
+    // the reorderable run of two or more — a stray `reorderable` column
+    // outside that run has nowhere to go, so it gets no drag. During a
+    // drag the origin header dims and an insertion bar marks the current
+    // drop slot — suppressed when the slot would put the column right
+    // back where it already is (a no-op drop needs no affordance).
+    const reorderable = !!(
+      column.reorderable &&
+      range &&
+      index >= range[0] &&
+      index <= range[1]
+    );
+    const dragging = this.draggingColumnKey === column.key;
+    const dropSlot = fromIndex === -1 ? -1 : this.columnDropSlot;
+    const noopSlot = dropSlot === fromIndex || dropSlot === fromIndex + 1;
+    const dropBefore = !noopSlot && dropSlot === index && reorderable;
+    const dropAfter =
+      !noopSlot && !!range && dropSlot === range[1] + 1 && index === range[1];
     const cls = `head-cell ${column.align || ''} ${
       column.sortable ? 'sortable' : ''
-    } ${active ? 'active' : ''} ${
-      column.grow ? 'grow' : ''
+    } ${active ? 'active' : ''} ${column.grow ? 'grow' : ''} ${
+      reorderable ? 'reorderable' : ''
+    } ${dragging ? 'dragging' : ''} ${dropBefore ? 'drop-before' : ''} ${
+      dropAfter ? 'drop-after' : ''
     } ${this.columnPinClass(column)}`;
     // The sort arrow sits on the inboard side of the label — left of
     // it for right-aligned columns, right of it otherwise — so the
@@ -3371,10 +3726,14 @@ export class ContentList<T = any> extends RapidElement {
     return html`
       <th
         class=${cls}
+        data-key=${column.key}
         style="${this.columnPinStyle(column)} ${widthStyle}"
         @click=${column.sortable
           ? (event: MouseEvent) => this.handleColumnHeaderClick(event, column)
           : null}
+        @pointerdown=${reorderable
+          ? (event: PointerEvent) => this.startColumnDrag(event, column)
+          : null}
       >
         ${this.renderResizeHandle(leadingResizeColumn, true)}
         <div class="head-inner" style=${this.cellWidthStyle(column)}>