@colixsystems/widget-sdk 0.246.0 → 0.248.0

package/dist/sortable-list-view.js

@@ -0,0 +1,228 @@
+// The ONE implementation behind `<SortableList>`: rows the user reorders by
+// dragging a handle, or by its move options and arrow keys. The rows are the
+// app's `<ListRow>`s, so the list wears the theme's `list` scope.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { measureNode } from "./drag-kit-view.js";
+import {
+  canDragItem,
+  fillLabel,
+  insertionIndex,
+  itemKey,
+  itemLabel,
+  keyboardStep,
+  listMoveActions,
+  listShiftOffsets,
+  moveItem,
+  resolveSortableLabels,
+} from "./sortable-logic.js";
+import {
+  HIDDEN,
+  HIDDEN_FROM_READERS,
+  PROXY_SCALE,
+  proxyStyle,
+  resolveSortableTokens,
+  slotStyle,
+} from "./sortable-tokens.js";
+
+const h = React.createElement;
+
+const sameIndex = (a, b) => a === b;
+
+/** How a row is drawn while a drag is under way. */
+function rowSlot(drag, key) {
+  if (!drag || drag.key !== key) return null;
+  if (drag.settling) return "hidden";
+  return drag.target === drag.data.from ? "vacated" : "target";
+}
+
+/**
+ * Bind the shared sortable list to one platform's primitives.
+ *
+ * @param {{View: any, Animated: any, List: any, ListRow: any}} rn
+ * @param {ReturnType<import("./drag-kit-view.js").makeDragKit>} kit
+ */
+export function makeSortableList(rn, kit) {
+  const { View, Animated, List, ListRow } = rn;
+  const { HandleMark, moveHandle, useAnnouncer, useDragSession, useFocusAfterMove } = kit;
+
+  // Rows move aside with a transform, never a re-order, so the held
+  // handle's node stays where the pointer pressed it.
+  function SortableRow({ divider, rowRef, shift, slot, tokens, leading, title, testID, children }) {
+    const frame = [shift ? { transform: [{ translateY: shift }] } : null, slot && slot !== "hidden" ? slotStyle(tokens, slot) : null];
+    return h(
+      View,
+      { ref: rowRef, style: frame, testID },
+      h(View, { style: slot ? HIDDEN : null }, h(ListRow, { divider, leading, title }, children)),
+    );
+  }
+
+  /**
+   * A list the user reorders. `onReorder(nextItems, { from, to, item })`
+   * runs once per real change; a drag released where it started, or taken
+   * away, springs back and calls nothing.
+   */
+  function SortableList({
+    items,
+    onReorder,
+    renderItem,
+    keyExtractor,
+    getItemLabel,
+    canDrag = true,
+    variant,
+    labels,
+    style,
+    testID,
+    accessibilityLabel,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const tokens = resolveSortableTokens(theme);
+    const words = resolveSortableLabels(labels);
+    const list = Array.isArray(items) ? items : [];
+    const keys = list.map((item, i) => itemKey(item, i, keyExtractor));
+    const order = keys.join("\u0000");
+    const rootRef = React.useRef(null);
+    const rows = React.useRef(new Map());
+    const handles = React.useRef(new Map());
+    const pendingFocus = useFocusAfterMove(handles);
+    const [announce, liveRegion] = useAnnouncer();
+
+    // Presses faster than the widget re-renders would repeat the last move.
+    const lastCommit = React.useRef(null);
+    const commit = (from, to) => {
+      if (from < 0 || to < 0 || to >= list.length || to === from) return false;
+      const move = `${order}\u0001${from}\u0001${to}`;
+      if (lastCommit.current === move) return false;
+      lastCommit.current = move;
+      const item = list[from];
+      if (typeof onReorder === "function") onReorder(moveItem(list, from, to), { from, to, item });
+      announce(fillLabel(words.moved, { item: itemLabel(item, keys[from], getItemLabel), position: to + 1, total: list.length }));
+      return true;
+    };
+    const moveKey = (key, to) => {
+      if (commit(keys.indexOf(key), to)) pendingFocus.current = key;
+    };
+
+    const session = useDragSession({
+      axis: "y",
+      rootRef,
+      sameTarget: sameIndex,
+      measure: async (key) => {
+        const from = keys.indexOf(key);
+        const [root, ...frames] = await Promise.all([rootRef.current, ...keys.map((k) => rows.current.get(k))].map(measureNode));
+        if (from < 0 || !root || !frames[from]) return null;
+        const own = frames[from];
+        return {
+          key,
+          from,
+          frames,
+          order,
+          resting: from,
+          origin: { left: own.x - root.x, top: own.y - root.y, width: own.width },
+        };
+      },
+      track: (data, gesture) => {
+        const own = data.frames[data.from];
+        return insertionIndex(data.frames, data.from, own.y + own.height / 2 + gesture.dy);
+      },
+      drop: (data, to) => {
+        if (!commit(keys.indexOf(data.key), to)) return null;
+        return { x: 0, y: listShiftOffsets(data.frames, data.from, to)[data.from] };
+      },
+    });
+    const { drag } = session;
+    // Frames measured for another order would aim and commit at the wrong rows.
+    const stale = drag !== null && !drag.settling && drag.data.order !== order;
+    React.useEffect(() => {
+      if (stale) session.cancel();
+    });
+    const shifts =
+      drag && !drag.settling && !stale ? listShiftOffsets(drag.data.frames, drag.data.from, drag.target) : null;
+
+    const handleFor = (item, key, index) => {
+      const actions = listMoveActions(index, list.length, words);
+      return moveHandle({
+        itemKey: key,
+        name: itemLabel(item, key, getItemLabel),
+        actions,
+        run: (name) => {
+          const action = actions.find((a) => a.name === name);
+          if (action) moveKey(key, action.to);
+        },
+        onKey: (pressed) => {
+          const step = keyboardStep(pressed);
+          if (step) moveKey(key, index + step.by);
+          return step !== null;
+        },
+        session,
+        handles,
+        color: tokens.handleColor,
+        words,
+        testID,
+      });
+    };
+
+    // With no renderItem a row shows the item's label as its title.
+    const draw = (item, index, dragging) =>
+      typeof renderItem === "function" ? renderItem({ item, index, dragging }) : undefined;
+    const content = list.map((item, index) => {
+      const key = keys[index];
+      return h(
+        SortableRow,
+        {
+          key,
+          rowRef: (node) => (node ? rows.current.set(key, node) : rows.current.delete(key)),
+          shift: shifts ? shifts[index] : 0,
+          slot: rowSlot(drag, key),
+          tokens,
+          title: itemLabel(item, key, getItemLabel),
+          testID: testID ? `${testID}-row-${key}` : undefined,
+          leading: canDragItem(canDrag, item) ? handleFor(item, key, index) : null,
+        },
+        draw(item, index, false),
+      );
+    });
+
+    const lifted = drag ? list[keys.indexOf(drag.key)] : undefined;
+    const proxy =
+      drag && lifted !== undefined
+        ? h(
+            Animated.View,
+            {
+              ...HIDDEN_FROM_READERS,
+              testID: testID ? `${testID}-proxy` : undefined,
+              style: [
+                proxyStyle(tokens, drag.data.origin, variant !== "card"),
+                { transform: [...session.pan.getTranslateTransform(), { scale: PROXY_SCALE }] },
+              ],
+            },
+            h(
+              List,
+              { variant },
+              h(
+                ListRow,
+                {
+                  divider: false,
+                  leading: h(HandleMark, { color: tokens.handleColor }),
+                  title: itemLabel(lifted, drag.key, getItemLabel),
+                },
+                draw(lifted, keys.indexOf(drag.key), true),
+              ),
+            ),
+          )
+        : null;
+
+    return h(
+      View,
+      { ref: rootRef, testID, accessibilityLabel, style: [{ alignSelf: "stretch" }, style] },
+      h(List, { variant }, content),
+      proxy,
+      liveRegion,
+    );
+  }
+
+  SortableList.displayName = "SortableList";
+  return SortableList;
+}

package/dist/sortable-logic.js

@@ -0,0 +1,273 @@
+// The drag-and-drop arithmetic behind `<SortableList>` and `<Board>`, without
+// a renderer: where an item lands, how far the other rows move aside, which
+// column the dragged card is over, how fast a narrow board scrolls, and the
+// move actions offered when dragging is not possible. Every frame is a
+// window rectangle from `measureInWindow`, so no parent padding or scroll
+// offset enters a comparison.
+
+/** How far a press must travel before it becomes a drag rather than a tap. */
+export const DRAG_SLOP = 6;
+/** The band at a narrow board's edge that scrolls it while a card is held there. */
+export const AUTO_SCROLL_EDGE = 48;
+/** The most a held card scrolls the board per tick, at the very edge. */
+export const AUTO_SCROLL_MAX_STEP = 16;
+/** A column's width when a narrow board scrolls its columns sideways. */
+export const BOARD_COLUMN_WIDTH = 280;
+
+/** The words a move announces and its controls carry; `{item}` and the like are filled in. */
+export const DEFAULT_SORTABLE_LABELS = Object.freeze({
+  handle: "Move {item}",
+  hint: "Drag to move it, or open the move options. The arrow keys move it too.",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  moveToTop: "Move to top",
+  moveToBottom: "Move to bottom",
+  moveToColumn: "Move to {column}",
+  moved: "{item} moved to position {position} of {total}",
+  movedToColumn: "{item} moved to {column}, position {position}",
+});
+
+/** The labels a widget passed, over the defaults; a blank entry keeps the default. */
+export function resolveSortableLabels(labels) {
+  const out = { ...DEFAULT_SORTABLE_LABELS };
+  if (!labels || typeof labels !== "object") return out;
+  for (const name of Object.keys(DEFAULT_SORTABLE_LABELS)) {
+    if (typeof labels[name] === "string" && labels[name] !== "") out[name] = labels[name];
+  }
+  return out;
+}
+
+/** A label with its `{name}` placeholders filled from `values`. */
+export function fillLabel(template, values) {
+  return String(template).replace(/\{(\w+)\}/g, (whole, name) =>
+    values && values[name] !== undefined && values[name] !== null ? String(values[name]) : whole,
+  );
+}
+
+/** An item's key: `keyExtractor` when given, else its `id`, `key`, or position. */
+export function itemKey(item, index, keyExtractor) {
+  if (typeof keyExtractor === "function") return String(keyExtractor(item, index));
+  if (item && typeof item === "object") {
+    if (item.id !== undefined && item.id !== null) return String(item.id);
+    if (item.key !== undefined && item.key !== null) return String(item.key);
+  }
+  return String(index);
+}
+
+/** The words that name an item to a screen reader. */
+export function itemLabel(item, key, getItemLabel) {
+  if (typeof getItemLabel === "function") {
+    const label = getItemLabel(item);
+    if (label !== undefined && label !== null && label !== "") return String(label);
+  }
+  if (item && typeof item === "object") {
+    for (const name of ["title", "name", "label"]) {
+      if (typeof item[name] === "string" && item[name] !== "") return item[name];
+    }
+  }
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  return key;
+}
+
+/** Whether the drag may start for this item: a flag, or a per-item answer. */
+export function canDragItem(canDrag, item) {
+  if (typeof canDrag === "function") return Boolean(canDrag(item));
+  return canDrag !== false;
+}
+
+export function clampIndex(index, length) {
+  if (length <= 0) return 0;
+  return Math.max(0, Math.min(length - 1, index));
+}
+
+/** A copy of `items` with the one at `from` moved to `to`. */
+export function moveItem(items, from, to) {
+  const next = [...items];
+  if (from < 0 || from >= next.length) return next;
+  const [moved] = next.splice(from, 1);
+  next.splice(clampIndex(to, next.length + 1), 0, moved);
+  return next;
+}
+
+/** Whether a press has travelled far enough to be a drag. */
+export function isDragGesture(dx, dy, slop = DRAG_SLOP) {
+  return Math.max(Math.abs(dx), Math.abs(dy)) >= slop;
+}
+
+const midY = (frame) => frame.y + frame.height / 2;
+const bottom = (frame) => frame.y + frame.height;
+
+/**
+ * Where the dragged row lands: the count of the OTHER rows whose middle sits
+ * above the dragged row's middle. Read against the frames measured when the
+ * drag began, so rows moving aside never feed back into the answer.
+ */
+export function insertionIndex(frames, from, centerY) {
+  let index = 0;
+  frames.forEach((frame, i) => {
+    if (i !== from && frame && midY(frame) < centerY) index += 1;
+  });
+  return index;
+}
+
+/**
+ * How far each row moves while the dragged one (at `from`) is held over
+ * `to`: the rows it passed step aside by its own slot, and the vacated slot
+ * travels to where it will land, so the gap always shows the drop.
+ */
+export function listShiftOffsets(frames, from, to) {
+  const offsets = frames.map(() => 0);
+  if (from === to || !frames[from] || !frames[to]) return offsets;
+  if (from < to) {
+    const step = frames[from + 1].y - frames[from].y;
+    for (let i = from + 1; i <= to; i += 1) offsets[i] = -step;
+    offsets[from] = bottom(frames[to]) - bottom(frames[from]);
+  } else {
+    const step = bottom(frames[from]) - bottom(frames[from - 1]);
+    for (let i = to; i < from; i += 1) offsets[i] = step;
+    offsets[from] = frames[to].y - frames[from].y;
+  }
+  return offsets;
+}
+
+/** The column whose frame holds `x`, or -1 when it is over none. */
+export function columnAt(columnFrames, x) {
+  return columnFrames.findIndex((frame) => Boolean(frame) && x >= frame.x && x < frame.x + frame.width);
+}
+
+/** Where a card lands in a column: the count of its cards whose middle is above `centerY`. */
+export function indexInColumn(cardFrames, centerY) {
+  return cardFrames.filter((frame) => frame && midY(frame) < centerY).length;
+}
+
+/**
+ * The drop line's distance from the top of its column: halfway between the
+ * cards it falls between, below the last card, or under the header of an
+ * empty column.
+ */
+export function dropLineOffset(columnFrame, cardFrames, index, headerHeight, gap) {
+  const cards = cardFrames.filter(Boolean);
+  if (cards.length === 0) return headerHeight + gap / 2;
+  if (index <= 0) return cards[0].y - columnFrame.y - gap / 2;
+  if (index >= cards.length) return bottom(cards[cards.length - 1]) - columnFrame.y + gap / 2;
+  return (bottom(cards[index - 1]) + cards[index].y) / 2 - columnFrame.y;
+}
+
+/**
+ * Where a dropped card's top settles, from the top of its column: under the
+ * header, then below each card it lands after. Its slot is gone from
+ * `cardFrames` already, so this is the column once the move is made.
+ */
+export function landingTop(headerHeight, cardFrames, index, gap) {
+  const before = cardFrames.filter(Boolean).slice(0, Math.max(0, index));
+  return before.reduce((top, frame) => top + frame.height + gap, headerHeight + gap);
+}
+
+/**
+ * How far to scroll a narrow board this tick: nothing in the middle, faster
+ * the deeper the held card sits in the band at either edge.
+ */
+export function autoScrollStep(position, start, end, edge = AUTO_SCROLL_EDGE, maxStep = AUTO_SCROLL_MAX_STEP) {
+  if (!(end > start) || !(edge > 0)) return 0;
+  const band = Math.min(edge, (end - start) / 2);
+  if (position < start + band) {
+    return -Math.round(maxStep * Math.min(1, (start + band - position) / band));
+  }
+  if (position > end - band) {
+    return Math.round(maxStep * Math.min(1, (position - (end - band)) / band));
+  }
+  return 0;
+}
+
+/** A scroll offset kept within what the content can scroll. */
+export function clampScroll(offset, contentSize, viewportSize) {
+  return Math.max(0, Math.min(offset, Math.max(0, contentSize - viewportSize)));
+}
+
+/**
+ * The moves a list row offers instead of dragging, each with where it puts
+ * the row. A move that changes nothing is left out, and so is "to top" or
+ * "to bottom" when it is the same step as "up" or "down".
+ */
+export function listMoveActions(index, count, labels) {
+  const last = count - 1;
+  return [
+    { name: "moveToTop", label: labels.moveToTop, to: 0, also: index - 1 },
+    { name: "moveUp", label: labels.moveUp, to: index - 1 },
+    { name: "moveDown", label: labels.moveDown, to: index + 1 },
+    { name: "moveToBottom", label: labels.moveToBottom, to: last, also: index + 1 },
+  ]
+    .filter((action) => action.to >= 0 && action.to <= last && action.to !== index && action.to !== action.also)
+    .map(({ name, label, to }) => ({ name, label, to }));
+}
+
+/**
+ * The moves a board card offers instead of dragging: up and down its column
+ * (when cards keep an order) and to the end of every other column.
+ *
+ * @param {{ columns: Array<{key: string, title: string}>, columnIndex: number,
+ *   index: number, counts: number[], reorderInColumn: boolean, labels: object }} spec
+ */
+export function boardMoveActions({ columns, columnIndex, index, counts, reorderInColumn, labels }) {
+  const actions = [];
+  if (reorderInColumn) {
+    if (index > 0) actions.push({ name: "moveUp", label: labels.moveUp, column: columnIndex, index: index - 1 });
+    if (index < counts[columnIndex] - 1) {
+      actions.push({ name: "moveDown", label: labels.moveDown, column: columnIndex, index: index + 1 });
+    }
+  }
+  columns.forEach((column, i) => {
+    if (i === columnIndex) return;
+    actions.push({
+      name: `moveTo:${column.key}`,
+      label: fillLabel(labels.moveToColumn, { column: column.title }),
+      column: i,
+      index: counts[i],
+    });
+  });
+  return actions;
+}
+
+const LIST_KEYS = Object.freeze({ ArrowUp: -1, ArrowDown: 1 });
+const COLUMN_KEYS = Object.freeze({ ArrowLeft: -1, ArrowRight: 1 });
+
+/** The step a key asks of a focused handle: `{ by }` in a list, `{ by }` or `{ column }` on a board. */
+export function keyboardStep(key, board = false) {
+  if (key in LIST_KEYS) return { by: LIST_KEYS[key] };
+  if (board && key in COLUMN_KEYS) return { column: COLUMN_KEYS[key] };
+  return null;
+}
+
+/** The board's cards grouped by column, each with its key; unknown columns are left out. */
+export function boardLanes(columns, items, getColumn, keyExtractor) {
+  const lanes = columns.map(() => []);
+  const where = new Map(columns.map((column, i) => [String(column.key), i]));
+  items.forEach((item, position) => {
+    const lane = where.get(String(typeof getColumn === "function" ? getColumn(item) : undefined));
+    if (lane !== undefined) lanes[lane].push({ item, key: itemKey(item, position, keyExtractor) });
+  });
+  return lanes;
+}
+
+/** Where a card sits: its column and place in it, or null. */
+export function findCard(lanes, key) {
+  for (let column = 0; column < lanes.length; column += 1) {
+    const index = lanes[column].findIndex((card) => card.key === key);
+    if (index !== -1) return { column, index };
+  }
+  return null;
+}
+
+/**
+ * Where a card dropped in `column` at `index` actually lands: within the
+ * column's room, and null when that is where it already is (or a card may
+ * not change place within its own column).
+ */
+export function boardLanding(lanes, from, column, index, reorderInColumn) {
+  if (!from || column < 0 || column >= lanes.length) return null;
+  const sameColumn = column === from.column;
+  const room = lanes[column].length - (sameColumn ? 1 : 0);
+  const at = Math.max(0, Math.min(index, room));
+  if (sameColumn && (!reorderInColumn || at === from.index)) return null;
+  return at;
+}

package/dist/sortable-tokens.js

@@ -0,0 +1,120 @@
+// The values `<SortableList>` and `<Board>` paint a drag with, from the
+// theme's own tokens: the lifted copy, the vacated slot, the drop target and
+// the board's columns. Platform-free, so both hosts draw a drag from the same
+// numbers and tests can pin them without a renderer. There is no theme scope
+// of their own: rows wear the `list` scope and cards the `card` scope.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+
+/** The lifted copy grows a little and lets the slot beneath show through. */
+export const PROXY_SCALE = 1.03;
+export const PROXY_OPACITY = 0.9;
+/** The move handle: a compact control in a dense row, never below 36px. */
+export const HANDLE_SIZE = 36;
+export const HANDLE_ICON_SIZE = 18;
+/** The line a board draws where a held card will land. */
+export const DROP_LINE_HEIGHT = 3;
+const TARGET_BORDER_WIDTH = 2;
+
+/** A held item's own content, kept in layout but unseen. */
+export const HIDDEN = Object.freeze({ opacity: 0 });
+/** The lifted copy repeats an item the reader already knows. */
+export const HIDDEN_FROM_READERS = Object.freeze({
+  "aria-hidden": true,
+  accessibilityElementsHidden: true,
+  importantForAccessibility: "no-hide-descendants",
+});
+
+/** The resolved drag palette and spacing for one theme. */
+export function resolveSortableTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const radii = base.radii || fallback.radii;
+  const spacing = base.spacing || fallback.spacing;
+  const elevation = base.elevation || fallback.elevation;
+  return {
+    handleColor: colors.onSurfaceMuted,
+    vacated: colors.surfaceMuted,
+    target: colors.primarySoft || colors.surfaceMuted,
+    targetBorder: colors.primary,
+    dropLine: colors.primary,
+    proxySurface: colors.surface,
+    radius: radii.md,
+    columnRadius: radii.lg,
+    columnBackground: colors.surfaceMuted,
+    columnPadding: spacing.sm,
+    columnGap: spacing.md,
+    cardGap: spacing.sm,
+    lift: elevation.lg || {},
+  };
+}
+
+/** The slot a held item left (`vacated`) or will land in (`target`). */
+export function slotStyle(tokens, kind) {
+  return {
+    backgroundColor: kind === "target" ? tokens.target : tokens.vacated,
+    borderRadius: tokens.radius,
+  };
+}
+
+/**
+ * The lifted copy that follows the pointer, placed over where the item was
+ * lifted from inside the component's own box. A card paints its own surface.
+ */
+export function proxyStyle(tokens, origin, withSurface = true) {
+  return {
+    position: "absolute",
+    left: origin.left,
+    top: origin.top,
+    width: origin.width,
+    zIndex: 10,
+    opacity: PROXY_OPACITY,
+    pointerEvents: "none",
+    borderRadius: tokens.radius,
+    ...(withSurface ? { backgroundColor: tokens.proxySurface } : null),
+    ...tokens.lift,
+  };
+}
+
+/** A board column; the one a card is held over takes the soft primary. */
+export function columnStyle(tokens, isTarget) {
+  return {
+    gap: tokens.cardGap,
+    padding: tokens.columnPadding,
+    borderRadius: tokens.columnRadius,
+    borderWidth: TARGET_BORDER_WIDTH,
+    borderColor: isTarget ? tokens.targetBorder : tokens.columnBackground,
+    backgroundColor: isTarget ? tokens.target : tokens.columnBackground,
+  };
+}
+
+/** How far a column's cards sit in from its outer edge: border, then padding. */
+export function columnContentInset(tokens) {
+  return TARGET_BORDER_WIDTH + tokens.columnPadding;
+}
+
+/** The drop line inside a column, `offset` from the column's top edge. */
+export function dropLineStyle(tokens, offset) {
+  return {
+    position: "absolute",
+    left: tokens.columnPadding,
+    right: tokens.columnPadding,
+    top: offset - DROP_LINE_HEIGHT / 2 - TARGET_BORDER_WIDTH,
+    height: DROP_LINE_HEIGHT,
+    borderRadius: DROP_LINE_HEIGHT,
+    backgroundColor: tokens.dropLine,
+    pointerEvents: "none",
+  };
+}
+
+/** The move handle's own box: a real press target with the icon centred. */
+export function handleStyle() {
+  return {
+    width: HANDLE_SIZE,
+    minHeight: HANDLE_SIZE,
+    alignSelf: "stretch",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+}

package/dist/sortable-view.js

@@ -0,0 +1,24 @@
+// The ONE implementation behind `<SortableList>` and `<Board>`. The platform
+// bindings (`sortable.js` / `sortable.native.js`) differ only in where the
+// primitives come from and in the handle's touch style on the web.
+
+import { makeDragKit } from "./drag-kit-view.js";
+import { makeSortableList } from "./sortable-list-view.js";
+import { makeBoard } from "./board-view.js";
+
+/**
+ * Bind both drag-and-drop components to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, ScrollView: any, Animated: any,
+ *   PanResponder: any, Platform: any, AccessibilityInfo: any, List: any,
+ *   ListRow: any, Card: any, Menu: any, handleSurface: object|null,
+ *   onOutsideScroll?: Function|null}} rn
+ */
+export function makeDragAndDrop(rn) {
+  const { View, Text, ScrollView, Animated, PanResponder, Platform, AccessibilityInfo, List, ListRow, Card, Menu, handleSurface, onOutsideScroll } = rn;
+  const kit = makeDragKit({ View, Text, Animated, PanResponder, Platform, AccessibilityInfo, Menu, handleSurface, onOutsideScroll });
+  return {
+    SortableList: makeSortableList({ View, Animated, List, ListRow }, kit),
+    Board: makeBoard({ View, Text, ScrollView, Animated, Card }, kit),
+  };
+}

package/dist/sortable.js

@@ -0,0 +1,39 @@
+// `<SortableList>` and `<Board>` (web). Bind ./sortable-view.js to
+// react-native-web; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { List, ListRow } from "./list.js";
+import { Card } from "./card.js";
+import { Menu } from "./popover.js";
+import { makeDragAndDrop } from "./sortable-view.js";
+
+// Without these a touch drag on the handle scrolls the page, and a mouse
+// drag selects the text it passes over.
+const handleSurface = Object.freeze({ touchAction: "none", userSelect: "none", cursor: "grab" });
+
+// A wheel turned mid-drag scrolls the page under the pointer; the component's
+// own scrolling is followed by the drag already.
+function onOutsideScroll(root, handler) {
+  const listener = (event) => {
+    if (root && event.target instanceof Node && root.contains(event.target)) return;
+    handler();
+  };
+  document.addEventListener("scroll", listener, { capture: true, passive: true });
+  return () => document.removeEventListener("scroll", listener, { capture: true });
+}
+
+export const { SortableList, Board } = makeDragAndDrop({
+  View: ReactNative.View,
+  Text: ReactNative.Text,
+  ScrollView: ReactNative.ScrollView,
+  Animated: ReactNative.Animated,
+  PanResponder: ReactNative.PanResponder,
+  Platform: ReactNative.Platform,
+  AccessibilityInfo: ReactNative.AccessibilityInfo,
+  List,
+  ListRow,
+  Card,
+  Menu,
+  handleSurface,
+  onOutsideScroll,
+});