@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-IVNRBPGC.js

@@ -0,0 +1,1018 @@
+import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-PZXZJBMP.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, PanResponder, View, Pressable, StyleSheet, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SWIPE_ACTION_WIDTH = 64;
+var SWIPE_ACTION_GAP = 8;
+var SWIPE_ACTION_PAD = 6;
+var SWIPE_ARM_THRESHOLD = 214;
+var SWIPE_FLICK_VELOCITY = -1600;
+var SWIPE_AXIS_LOCK_PX = 6;
+var SWIPE_OVERSCROLL_DAMP = 0.3;
+var SWIPE_PROJECTION_S = 0.1;
+var SWIPE_COLLAPSE_MARGIN = -10;
+var SWIPE_COLLAPSE_REMOVE_MS = 340;
+var SWIPE_SPRING_SNAP = {
+  stiffness: 220,
+  damping: 26,
+  mass: 1,
+  restDisplacementThreshold: 0.25,
+  restSpeedThreshold: 0.25
+};
+var SWIPE_SPRING_COMMIT = {
+  stiffness: 240,
+  damping: 22,
+  mass: 1,
+  restDisplacementThreshold: 0.25,
+  restSpeedThreshold: 0.25
+};
+var FALLBACK_ROW_WIDTH = 300;
+function swipeSideSign(side) {
+  return side === "leading" ? 1 : -1;
+}
+function activeSwipeSide(offset) {
+  if (offset > 0) return "leading";
+  if (offset < 0) return "trailing";
+  return null;
+}
+function swipeActionCollapses(action) {
+  return action.collapses ?? action.destructive === true;
+}
+function swipeCommitAction(actions) {
+  const primary = actions[actions.length - 1];
+  if (!primary) return null;
+  return primary.fullSwipe ?? primary.destructive === true ? primary : null;
+}
+function normalizeSwipeActions(prop) {
+  if (prop == null) return { leading: [], trailing: [] };
+  if (Array.isArray(prop)) {
+    return { leading: [], trailing: orderSwipeActions(prop) };
+  }
+  const sides = prop;
+  return {
+    leading: orderSwipeActions(sides.leading ?? []),
+    trailing: orderSwipeActions(sides.trailing ?? [])
+  };
+}
+function railOrder(actions, side) {
+  return side === "leading" ? [...actions].reverse() : actions;
+}
+function swipeOpenOffset(count, side = "trailing") {
+  if (count <= 0) return 0;
+  const magnitude = SWIPE_ACTION_WIDTH * count + SWIPE_ACTION_GAP * (count - 1) + SWIPE_ACTION_PAD;
+  return swipeSideSign(side) * magnitude;
+}
+function swipeProgress(offset, openOffset) {
+  if (openOffset === 0) return 0;
+  return Math.max(0, Math.min(1, offset / openOffset));
+}
+function swipeActionOpacity(p) {
+  return Math.min(1, p * 1.4);
+}
+function swipeActionScale(p) {
+  return 0.72 + 0.28 * Math.min(1, p * 1.3);
+}
+function isSwipeArmed(offset, side = "trailing") {
+  return offset * swipeSideSign(side) > SWIPE_ARM_THRESHOLD;
+}
+function clampSwipeOffset(x, hasLeading = false, hasTrailing = true) {
+  if (x > 0) return hasLeading ? x : Math.min(0, x * SWIPE_OVERSCROLL_DAMP);
+  if (x < 0) return hasTrailing ? x : Math.max(0, x * SWIPE_OVERSCROLL_DAMP);
+  return 0;
+}
+function lockSwipeAxis(dx, dy) {
+  if (Math.abs(dx) + Math.abs(dy) <= SWIPE_AXIS_LOCK_PX) return null;
+  return Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+}
+function armedActionWidth(offset, rowWidth) {
+  return Math.min(Math.abs(offset) - SWIPE_ACTION_PAD, rowWidth - SWIPE_ACTION_PAD * 2);
+}
+function resolveSwipeRelease(offset, velocity, openOffset, canCommit, side = "trailing") {
+  const sign = swipeSideSign(side);
+  const flicked = velocity * sign > -SWIPE_FLICK_VELOCITY;
+  if (canCommit && (isSwipeArmed(offset, side) || flicked)) {
+    return { kind: "commit" };
+  }
+  const projected = (offset + velocity * SWIPE_PROJECTION_S) * sign;
+  return { kind: "snap", to: projected > openOffset * sign / 2 ? openOffset : 0 };
+}
+function orderSwipeActions(actions) {
+  const safe = actions.filter((a) => a.destructive !== true);
+  const destructive = actions.filter((a) => a.destructive === true);
+  return destructive.length === 0 ? actions : [...safe, ...destructive];
+}
+function swipeAccessibilityActions(actions, menuLabel) {
+  return [
+    { name: "longpress", label: menuLabel },
+    ...actions.map((a) => ({ name: a.key, label: a.label }))
+  ];
+}
+function resolveSwipeAccessibilityAction(actions, name) {
+  if (name === "longpress") return "menu";
+  return actions.find((a) => a.key === name) ?? null;
+}
+function resolveRowMotion(motion, osReduced) {
+  if (motion === "none") return "none";
+  if (motion === "reduced") return "reduced";
+  return osReduced ? "reduced" : "full";
+}
+function line(value, style) {
+  if (value == null || value === false) return null;
+  return typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { style, numberOfLines: 1, children: value }) : value;
+}
+function SelectionIndicator({ selected }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { selectedBox: selected });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      style: styles.selectBox,
+      children: selected ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "check",
+          size: theme.icon.sm,
+          color: theme.color.accentInk,
+          strokeWidth: theme.icon.strokeBold
+        }
+      ) : null
+    }
+  );
+}
+function RowBody({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  onPress,
+  divider = false,
+  disabled = false,
+  accessibilityLabel,
+  density = "comfortable",
+  selectable = false,
+  selected = false,
+  onToggleSelected,
+  style,
+  interactive = false,
+  onLongPress,
+  accessibilityActions,
+  onAccessibilityAction,
+  accessibilityHint,
+  dragHandle
+}) {
+  const { styles } = useStyles(sheet, { divider, disabled, density, selected });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectable && selected ? /* @__PURE__ */ jsx(View, { accessible: false, style: styles.selectBar }) : null,
+    selectable ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: /* @__PURE__ */ jsx(SelectionIndicator, { selected }) }) : null,
+    leading != null ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: leading }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      line(title, styles.title),
+      line(subtitle, styles.subtitle)
+    ] }),
+    trailing != null ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: trailing }) : null,
+    dragHandle != null ? dragHandle : null
+  ] });
+  const primaryPress = selectable ? onToggleSelected : onPress;
+  if (primaryPress || interactive) {
+    const label = accessibilityLabel ?? (typeof title === "string" ? title : void 0);
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: selectable ? "checkbox" : "button",
+        accessibilityLabel: label,
+        accessibilityHint,
+        accessibilityState: selectable ? { disabled, checked: selected } : { disabled },
+        "aria-checked": selectable ? selected : void 0,
+        accessibilityActions,
+        onAccessibilityAction,
+        disabled,
+        onPress: disabled ? void 0 : primaryPress,
+        onLongPress: disabled ? void 0 : onLongPress,
+        delayLongPress: LONG_PRESS_DELAY_MS,
+        style: ({ pressed }) => [styles.base, style, pressed && !disabled ? styles.pressed : null],
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.base, style], children: content });
+}
+function ListRow(props) {
+  const {
+    swipeActions,
+    swipeReleaseLabel,
+    swipeMenuLabel,
+    swipeHint,
+    selectable = false,
+    selected,
+    defaultSelected = false,
+    onSelectedChange,
+    draggable = false,
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    onMoveUp,
+    onMoveDown,
+    dragHandleLabel,
+    motion = "full",
+    ...rest
+  } = props;
+  const isControlled = selected !== void 0;
+  const [internalSelected, setInternalSelected] = React.useState(defaultSelected);
+  const isSelected = isControlled ? selected : internalSelected;
+  const toggleSelected = React.useCallback(() => {
+    const next = !isSelected;
+    if (!isControlled) setInternalSelected(next);
+    haptics.selection();
+    onSelectedChange?.(next);
+  }, [isControlled, isSelected, onSelectedChange]);
+  const row = {
+    ...rest,
+    selectable,
+    selected: isSelected,
+    onToggleSelected: selectable ? toggleSelected : void 0
+  };
+  const sides = React.useMemo(() => normalizeSwipeActions(swipeActions), [swipeActions]);
+  if (draggable) {
+    return /* @__PURE__ */ jsx(
+      DraggableRow,
+      {
+        row,
+        onDragStart,
+        onDragMove,
+        onDragEnd,
+        onMoveUp,
+        onMoveDown,
+        handleLabel: dragHandleLabel ?? "Drag to reorder",
+        motion
+      }
+    );
+  }
+  if (sides.leading.length === 0 && sides.trailing.length === 0) return /* @__PURE__ */ jsx(RowBody, { ...row });
+  return /* @__PURE__ */ jsx(
+    SwipeRow,
+    {
+      row,
+      sides,
+      releaseLabel: swipeReleaseLabel ?? "Release",
+      menuLabel: swipeMenuLabel ?? "Row actions",
+      hint: swipeHint ?? "Long press for actions",
+      motion
+    }
+  );
+}
+function SwipeRow({
+  row,
+  sides,
+  releaseLabel,
+  menuLabel,
+  hint,
+  motion
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { divider: false, disabled: false });
+  const reducedMotion = resolveRowMotion(motion, theme.reduceMotion) !== "full";
+  const hasLeading = sides.leading.length > 0;
+  const hasTrailing = sides.trailing.length > 0;
+  const rails = React.useMemo(
+    () => ({
+      leading: {
+        actions: sides.leading,
+        openOffset: swipeOpenOffset(sides.leading.length, "leading"),
+        commit: swipeCommitAction(sides.leading)
+      },
+      trailing: {
+        actions: sides.trailing,
+        openOffset: swipeOpenOffset(sides.trailing.length, "trailing"),
+        commit: swipeCommitAction(sides.trailing)
+      }
+    }),
+    [sides]
+  );
+  const allActions = React.useMemo(() => [...sides.leading, ...sides.trailing], [sides]);
+  const dir = theme.rtl ? -1 : 1;
+  const x = React.useRef(new Animated.Value(0)).current;
+  const arm = React.useRef(new Animated.Value(0)).current;
+  const armWidth = React.useRef(new Animated.Value(SWIPE_ACTION_WIDTH)).current;
+  const collapseH = React.useRef(new Animated.Value(0)).current;
+  const collapseOpacity = React.useRef(new Animated.Value(1)).current;
+  const collapseMargin = React.useRef(new Animated.Value(0)).current;
+  const cur = React.useRef(0);
+  const rowWidth = React.useRef(FALLBACK_ROW_WIDTH);
+  const rowHeight = React.useRef(0);
+  const armedRef = React.useRef(false);
+  const sideRef = React.useRef(null);
+  const axis = React.useRef(null);
+  const lastX = React.useRef(0);
+  const lastT = React.useRef(0);
+  const vel = React.useRef(0);
+  const running = React.useRef(null);
+  const removeTimer = React.useRef(null);
+  const [armed, setArmed] = React.useState(false);
+  const [openSide, setOpenSide] = React.useState(null);
+  const [collapsing, setCollapsing] = React.useState(false);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState(null);
+  const rootRef = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (removeTimer.current) clearTimeout(removeTimer.current);
+    },
+    []
+  );
+  const set = React.useCallback(
+    (next) => {
+      const v = clampSwipeOffset(next, hasLeading, hasTrailing);
+      cur.current = v;
+      x.setValue(v);
+      const side = activeSwipeSide(v);
+      if (side !== sideRef.current) {
+        sideRef.current = side;
+        setOpenSide(side);
+      }
+      const nowArmed = side !== null && rails[side].commit !== null && isSwipeArmed(v, side);
+      if (nowArmed !== armedRef.current) {
+        armedRef.current = nowArmed;
+        setArmed(nowArmed);
+        arm.setValue(nowArmed ? 1 : 0);
+        if (nowArmed) haptics.impact("medium");
+      }
+      armWidth.setValue(nowArmed ? armedActionWidth(v, rowWidth.current) : SWIPE_ACTION_WIDTH);
+    },
+    [x, arm, armWidth, rails, hasLeading, hasTrailing]
+  );
+  const springTo = React.useCallback(
+    (to, velocity, config, done) => {
+      running.current?.stop();
+      if (reducedMotion) {
+        running.current = Animated.timing(x, {
+          toValue: to,
+          duration: theme.motion.collapse.duration,
+          easing: Easing.bezier(...theme.motion.collapse.easing),
+          useNativeDriver: true
+        });
+      } else {
+        running.current = Animated.spring(x, {
+          toValue: to,
+          velocity,
+          ...config,
+          useNativeDriver: true
+        });
+      }
+      const toSide = activeSwipeSide(to);
+      const widthTarget = toSide !== null && rails[toSide].commit !== null && isSwipeArmed(to, toSide) ? armedActionWidth(to, rowWidth.current) : SWIPE_ACTION_WIDTH;
+      Animated.timing(armWidth, {
+        toValue: widthTarget,
+        duration: theme.motion.expand.duration,
+        easing: Easing.bezier(...theme.motion.expand.easing),
+        useNativeDriver: false
+      }).start();
+      running.current.start(({ finished }) => {
+        if (!finished) return;
+        set(to);
+        done?.();
+      });
+    },
+    [x, armWidth, set, rails, reducedMotion, theme.motion.collapse, theme.motion.expand]
+  );
+  const collapse = React.useCallback(
+    (done) => {
+      collapseH.setValue(rowHeight.current);
+      setCollapsing(true);
+      const height = theme.motion.spring;
+      const fade = theme.motion.collapse;
+      Animated.parallel([
+        Animated.timing(collapseH, {
+          toValue: 0,
+          duration: theme.duration.base,
+          easing: Easing.bezier(...height.easing),
+          useNativeDriver: false
+        }),
+        Animated.timing(collapseOpacity, {
+          toValue: 0,
+          duration: theme.duration.base,
+          easing: Easing.bezier(...fade.easing),
+          useNativeDriver: false
+        }),
+        Animated.timing(collapseMargin, {
+          toValue: SWIPE_COLLAPSE_MARGIN,
+          duration: theme.duration.base,
+          easing: Easing.bezier(...height.easing),
+          useNativeDriver: false
+        })
+      ]).start();
+      removeTimer.current = setTimeout(
+        () => done?.(),
+        theme.reduceMotion ? 1 : SWIPE_COLLAPSE_REMOVE_MS
+      );
+    },
+    [
+      collapseH,
+      collapseOpacity,
+      collapseMargin,
+      theme.duration.base,
+      theme.motion.spring,
+      theme.motion.collapse,
+      theme.reduceMotion
+    ]
+  );
+  const fire = React.useCallback(
+    (action) => {
+      if (swipeActionCollapses(action)) {
+        haptics.impact("heavy");
+        collapse(action.onAction);
+      } else {
+        haptics.impact("light");
+        springTo(0, 0, SWIPE_SPRING_SNAP);
+        action.onAction();
+      }
+    },
+    [springTo, collapse]
+  );
+  const end = React.useCallback(() => {
+    if (axis.current !== "x") return;
+    axis.current = null;
+    const side = activeSwipeSide(cur.current);
+    if (side === null) return;
+    const rail = rails[side];
+    const decision = resolveSwipeRelease(
+      cur.current,
+      vel.current,
+      rail.openOffset,
+      rail.commit !== null,
+      side
+    );
+    if (decision.kind === "snap") {
+      springTo(decision.to, vel.current, SWIPE_SPRING_SNAP);
+      return;
+    }
+    const target = rail.commit;
+    if (!target) return;
+    haptics.impact("heavy");
+    if (!swipeActionCollapses(target)) {
+      springTo(0, vel.current, SWIPE_SPRING_COMMIT);
+      target.onAction();
+      return;
+    }
+    springTo(
+      swipeSideSign(side) * rowWidth.current,
+      vel.current,
+      SWIPE_SPRING_COMMIT,
+      () => collapse(target.onAction)
+    );
+  }, [rails, springTo, collapse]);
+  const setRef = React.useRef(set);
+  setRef.current = set;
+  const endRef = React.useRef(end);
+  endRef.current = end;
+  const dirRef = React.useRef(dir);
+  dirRef.current = dir;
+  const startOffset = React.useRef(0);
+  const pan = React.useRef(
+    PanResponder.create({
+      // Never claim on touch-down: a tap must still reach the row, and the
+      // enclosing scroll view must keep an unambiguous vertical drag.
+      onStartShouldSetPanResponder: () => false,
+      // The axis lock. RN re-runs this negotiation on every move until someone
+      // claims the gesture, which is exactly the reference's `axisLock === null`
+      // window — returning `false` for a vertical drag leaves it to the list,
+      // which is what makes the row usable inside a scroll view at all.
+      onMoveShouldSetPanResponder: (_e, g) => lockSwipeAxis(g.dx, g.dy) === "x",
+      onPanResponderGrant: (_e, g) => {
+        running.current?.stop();
+        axis.current = "x";
+        startOffset.current = cur.current;
+        lastX.current = g.moveX;
+        lastT.current = Date.now();
+        vel.current = 0;
+      },
+      onPanResponderMove: (_e, g) => {
+        setRef.current(startOffset.current + g.dx * dirRef.current);
+        const now = Date.now();
+        vel.current = (g.moveX - lastX.current) / Math.max(1, now - lastT.current) * 1e3 * dirRef.current;
+        lastX.current = g.moveX;
+        lastT.current = now;
+      },
+      onPanResponderRelease: () => endRef.current(),
+      onPanResponderTerminate: () => endRef.current()
+    })
+  ).current;
+  const onLayout = (e) => {
+    rowWidth.current = e.nativeEvent.layout.width || FALLBACK_ROW_WIDTH;
+    rowHeight.current = e.nativeEvent.layout.height || rowHeight.current;
+  };
+  const openMenu = () => {
+    const node = rootRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((mx, my, width, height) => setAnchor({ x: mx, y: my, width, height }));
+    }
+    haptics.impact("heavy");
+    setMenuOpen(true);
+  };
+  const a11yActions = swipeAccessibilityActions(allActions, menuLabel);
+  const onAccessibilityAction = (e) => {
+    const target = resolveSwipeAccessibilityAction(allActions, e.nativeEvent.actionName);
+    if (target === "menu") openMenu();
+    else if (target) fire(target);
+  };
+  const menuItems = allActions.map((a) => ({
+    key: a.key,
+    label: a.label,
+    icon: a.icon ?? (a.destructive === true ? "trash" : "folder"),
+    destructive: a.destructive,
+    onSelect: () => fire(a)
+  }));
+  const renderRail = (side) => {
+    const rail = rails[side];
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          StyleSheet.absoluteFill,
+          styles.rail,
+          side === "leading" ? styles.railLeading : styles.railTrailing,
+          // A closed rail sits under the foreground at opacity 0. Taking it out
+          // of hit-testing means a tap can never reach the wrong side's buttons,
+          // and costs nothing: `openSide` only re-renders when the sign changes.
+          // In `style`, not the prop — the prop is deprecated as of RN 0.74.
+          { pointerEvents: openSide === side ? "auto" : "none" }
+        ],
+        children: railOrder(rail.actions, side).map((action) => /* @__PURE__ */ jsx(
+          SwipeActionButton,
+          {
+            action,
+            side,
+            x,
+            arm,
+            armWidth,
+            openOffset: rail.openOffset,
+            morphs: action === rail.commit,
+            armed: armed && openSide === side,
+            releaseLabel: action.releaseLabel ?? releaseLabel,
+            reduced: reducedMotion,
+            onPress: () => {
+              if (activeSwipeSide(cur.current) !== side || Math.abs(cur.current) < 2) return;
+              fire(action);
+            }
+          },
+          action.key
+        ))
+      },
+      side
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      ref: rootRef,
+      onLayout,
+      style: [
+        styles.swipeRoot,
+        collapsing ? {
+          height: collapseH,
+          opacity: collapseOpacity,
+          marginTop: collapseMargin
+        } : null
+      ],
+      children: [
+        hasLeading ? renderRail("leading") : null,
+        hasTrailing ? renderRail("trailing") : null,
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [styles.foreground, { transform: [{ translateX: Animated.multiply(x, dir) }] }],
+            ...pan.panHandlers,
+            children: /* @__PURE__ */ jsx(
+              RowBody,
+              {
+                ...row,
+                interactive: true,
+                onLongPress: openMenu,
+                accessibilityActions: a11yActions,
+                onAccessibilityAction,
+                accessibilityHint: hint
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContextMenuOverlay,
+          {
+            open: menuOpen,
+            onClose: () => setMenuOpen(false),
+            items: menuItems,
+            anchor,
+            accessibilityLabel: menuLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function SwipeActionButton({
+  action,
+  side,
+  x,
+  arm,
+  armWidth,
+  openOffset,
+  morphs,
+  armed,
+  releaseLabel,
+  reduced,
+  onPress
+}) {
+  const theme = useLoamTheme();
+  const destructive = action.destructive === true;
+  const { styles } = useStyles(sheet, { destructive });
+  const p = side === "leading" ? x.interpolate({
+    inputRange: [0, openOffset],
+    outputRange: [0, 1],
+    extrapolate: "clamp"
+  }) : x.interpolate({
+    inputRange: [openOffset, 0],
+    outputRange: [1, 0],
+    extrapolate: "clamp"
+  });
+  const revealOpacity = p.interpolate({
+    inputRange: [0, 1 / 1.4, 1],
+    outputRange: [0, 1, 1]
+  });
+  const revealScale = p.interpolate({
+    inputRange: [0, 1 / 1.3, 1],
+    outputRange: [0.72, 1, 1]
+  });
+  const notArmed = Animated.subtract(1, arm);
+  const opacity = morphs ? revealOpacity : Animated.multiply(revealOpacity, notArmed);
+  const scale = reduced ? 1 : morphs ? revealScale : Animated.add(Animated.multiply(revealScale, notArmed), Animated.multiply(arm, 0.4));
+  const label = morphs && armed ? releaseLabel : action.label;
+  const icon = action.icon ?? (destructive ? "trash" : "folder");
+  const ink = destructive ? theme.color.dangerInk : theme.color.infoInk;
+  return (
+    // Outer slot: the JS-driven morph width lives here, alone, so the inner
+    // view's `transform`/`opacity` can stay on the native driver.
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.actionSlot, morphs ? { width: armWidth } : null], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.actionFill, { opacity, transform: [{ scale }] }], children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        onPress,
+        style: [styles.action, morphs ? styles.actionMorphing : null],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: ink, strokeWidth: theme.icon.stroke }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: ink }], numberOfLines: 1, children: label })
+        ]
+      }
+    ) }) })
+  );
+}
+function dragAccessibilityActions(canMoveUp, canMoveDown) {
+  const actions = [];
+  if (canMoveUp) actions.push({ name: "moveUp", label: "Move up" });
+  if (canMoveDown) actions.push({ name: "moveDown", label: "Move down" });
+  return actions;
+}
+function DraggableRow({
+  row,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onMoveUp,
+  onMoveDown,
+  handleLabel,
+  motion
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { divider: false, disabled: false });
+  const reducedMotion = resolveRowMotion(motion, theme.reduceMotion) !== "full";
+  const noMotion = motion === "none";
+  const y = React.useRef(new Animated.Value(0)).current;
+  const lift = React.useRef(new Animated.Value(0)).current;
+  const [dragging, setDragging] = React.useState(false);
+  const begin = React.useCallback(() => {
+    setDragging(true);
+    haptics.impact("medium");
+    onDragStart?.();
+    if (reducedMotion) {
+      lift.setValue(0);
+      return;
+    }
+    Animated.timing(lift, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [lift, onDragStart, reducedMotion, theme.motion.enter]);
+  const settle = React.useCallback(() => {
+    haptics.selection();
+    onDragEnd?.();
+    if (noMotion) {
+      y.setValue(0);
+      lift.setValue(0);
+      setDragging(false);
+      return;
+    }
+    lift.setValue(0);
+    const settleY = reducedMotion ? Animated.timing(y, {
+      toValue: 0,
+      duration: theme.motion.exit.duration,
+      easing: Easing.bezier(...theme.motion.exit.easing),
+      useNativeDriver: true
+    }) : Animated.spring(y, { toValue: 0, useNativeDriver: true, ...theme.spring.press });
+    settleY.start(({ finished }) => {
+      if (finished) setDragging(false);
+    });
+  }, [y, lift, onDragEnd, noMotion, reducedMotion, theme.spring.press, theme.motion.exit]);
+  const beginRef = React.useRef(begin);
+  beginRef.current = begin;
+  const settleRef = React.useRef(settle);
+  settleRef.current = settle;
+  const moveRef = React.useRef(onDragMove);
+  moveRef.current = onDragMove;
+  const pan = React.useRef(
+    PanResponder.create({
+      // The handle is a dedicated grip, so it claims the gesture on touch-down —
+      // there is nothing else it could mean.
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => beginRef.current(),
+      onPanResponderMove: (_e, g) => {
+        y.setValue(g.dy);
+        moveRef.current?.(g.dy);
+      },
+      onPanResponderRelease: () => settleRef.current(),
+      onPanResponderTerminate: () => settleRef.current()
+    })
+  ).current;
+  const dragActions = dragAccessibilityActions(onMoveUp != null, onMoveDown != null);
+  const onRowAction = (e) => {
+    if (e.nativeEvent.actionName === "moveUp") onMoveUp?.();
+    else if (e.nativeEvent.actionName === "moveDown") onMoveDown?.();
+  };
+  const handle = /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      style: styles.slot,
+      ...pan.panHandlers,
+      children: /* @__PURE__ */ jsx(View, { style: styles.dragHandle, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "grip",
+          size: theme.icon.md,
+          color: dragging ? theme.color.accent : theme.color.text3,
+          strokeWidth: theme.icon.stroke
+        }
+      ) })
+    }
+  );
+  const scale = reducedMotion ? 1 : lift.interpolate({ inputRange: [0, 1], outputRange: [1, 1.02] });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        styles.dragRoot,
+        dragging ? styles.dragActive : null,
+        { transform: [{ translateY: y }, { scale }] }
+      ],
+      children: /* @__PURE__ */ jsx(
+        RowBody,
+        {
+          ...row,
+          interactive: true,
+          dragHandle: handle,
+          accessibilityActions: dragActions.length > 0 ? dragActions : void 0,
+          onAccessibilityAction: dragActions.length > 0 ? onRowAction : void 0,
+          accessibilityHint: `${handleLabel}. Use the move up and move down actions to reorder.`
+        }
+      )
+    }
+  );
+}
+function List({ children, role }) {
+  const { styles } = useStyles(sheet, { divider: false, disabled: false });
+  const items = React.Children.toArray(children).filter(Boolean);
+  return /* @__PURE__ */ jsx(View, { role, accessibilityRole: role, style: styles.list, children: items.map((child, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    child,
+    i < items.length - 1 ? (
+      // Hidden, not just unlabelled. The dividers are interleaved between
+      // the children, so under `role="list"` they would be owned children
+      // of the list alongside the items — and a `list` may own only
+      // `listitem`s. Hiding them keeps `aria-required-children` satisfied
+      // while `role="list"` satisfies `aria-required-parent`, which is the
+      // trade the board and notification-center notes both warn about.
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          style: styles.listDivider
+        }
+      )
+    ) : null
+  ] }, i)) });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    backgroundColor: "transparent",
+    variants: {
+      // Density drives the height floor + vertical padding from the shared
+      // ramp: `comfortable` is the canonical list-row height (56 at the default
+      // density, the 1.x value — so nothing regresses); `compact` drops to the
+      // touch control tier (44), which still clears `theme.tapMin`.
+      density: {
+        comfortable: { minHeight: theme.layout.listRowH, paddingVertical: theme.space.s3 },
+        compact: { minHeight: theme.ctl.lg, paddingVertical: theme.space.s2 }
+      },
+      // A selected row is drawn on an opaque `surface` — not the translucent
+      // `selected` wash — so its `text2` subtitle keeps a full AA margin (5.65:1
+      // in light) instead of the 4.28:1 the wash would leave it with over the
+      // page background. The accent signal is the start-edge bar + filled check.
+      selected: {
+        true: { backgroundColor: theme.color.surface },
+        false: {}
+      },
+      divider: {
+        true: { borderBottomWidth: theme.borderWidth.thin, borderBottomColor: theme.color.border },
+        false: {}
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  pressed: { backgroundColor: theme.color.surface2 },
+  slot: { flexShrink: 0 },
+  main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  // Row title = the "Headline" role (the one emphasised body-size style).
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.type.headline.fontWeight,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  // Row subtitle = the "Subheadline" role (supporting text under the title).
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text2
+  },
+  list: {
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.xl,
+    overflow: "hidden"
+  },
+  listDivider: { height: theme.space[1], backgroundColor: theme.color.border },
+  /* ---- selection affordance ---- */
+  /**
+   * The leading selection circle. `w2` is the static ring weight (part of the
+   * drawing, so it must not re-scale). On: `accent` fill + accent ring, with an
+   * `accentInk` check painted at the use site. Off: transparent over a
+   * `borderStrong` ring, which stays visible on the surface.
+   */
+  selectBox: {
+    width: theme.icon.lg,
+    height: theme.icon.lg,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      // Checked: a filled accent box, border matching the fill — so unlike the
+      // accent *edges* elsewhere (see `focusRingColor()`) there is no separate
+      // edge to hold to 3:1. The checkmark inside rides `accentInk`, which is
+      // measured against this fill, and the box's own boundary is fill-vs-row.
+      selectedBox: {
+        true: { backgroundColor: theme.color.accent, borderColor: theme.color.accent },
+        false: { backgroundColor: "transparent", borderColor: theme.color.borderStrong }
+      }
+    }
+  },
+  /**
+   * The start-edge accent bar marking a selected row. Absolutely positioned so
+   * it adds no layout shift between selected/unselected, and `accent` clears the
+   * 3:1 non-text-contrast bar against the surface in both modes.
+   */
+  selectBar: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    width: theme.space.s1,
+    backgroundColor: theme.color.accent,
+    pointerEvents: "none"
+  },
+  /* ---- drag layer ---- */
+  /** The draggable root at rest — transparent, so a grouped List's surface shows. */
+  dragRoot: { backgroundColor: "transparent" },
+  /**
+   * The lifted row: an opaque `surface` card so it detaches from the list, with
+   * `shadow.lg` for elevation. Under high contrast the shadow is zero, but the
+   * `scale` lift and the accent grip still signal the drag.
+   */
+  dragActive: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    // A row being dragged is lifted out of the flow, which is what `raised` is
+    // for — and what `sortable` / `board` use on the web for the same gesture.
+    // A bare `zIndex: 2` only worked because nothing else in the list claimed a
+    // layer; it says "above my neighbour" where the intent is "above the list".
+    zIndex: theme.z.raised,
+    // The lift is the whole "this row is moving" signal, and elevation is zeroed
+    // under high contrast — the accent edge says it there instead. It is
+    // `transparent` until then, so a resting row is untouched.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    ...theme.shadow.lg
+  },
+  /** The grip's hit area — padded to `tapMin`, the glyph itself never grows. */
+  dragHandle: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  /* ---- swipe layer ---- */
+  /** Clips the rail while the row is closed and while it collapses. */
+  swipeRoot: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  /** Shared geometry of both action rails behind the row. */
+  rail: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: SWIPE_ACTION_GAP,
+    // The reference's 74px row around 62px buttons is exactly `2 * PAD`.
+    paddingVertical: SWIPE_ACTION_PAD
+  },
+  /**
+   * Logical `flex-end` + `paddingEnd` / `flex-start` + `paddingStart` is what
+   * pins each rail to the correct *physical* edge under RTL with no extra code —
+   * both flip with the writing direction, so only the row's own `translateX`
+   * needs the `dir` multiplier.
+   */
+  railTrailing: { justifyContent: "flex-end", paddingEnd: SWIPE_ACTION_PAD },
+  railLeading: { justifyContent: "flex-start", paddingStart: SWIPE_ACTION_PAD },
+  /**
+   * The draggable row. It only takes the `surface` fill it needs to mask the
+   * rail: the reference's row is a standalone card (`radius.lg` + hairline +
+   * `shadow.sm`), but a Loam `ListRow` composes inside `List`, which owns that
+   * chrome — adding it here would double the border inside a grouped list.
+   */
+  foreground: {
+    backgroundColor: theme.color.surface
+  },
+  /** Holds the animated morph width; never transformed itself. */
+  actionSlot: { flexGrow: 0, flexShrink: 0, alignSelf: "stretch" },
+  /** Carries the native-driven reveal (`opacity` + `scale`). */
+  actionFill: { flex: 1 },
+  /** The morphing destructive action fills whatever width the slot animates to. */
+  actionMorphing: { width: "100%" },
+  action: {
+    width: SWIPE_ACTION_WIDTH,
+    flex: 1,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    // Reference `gap:5px` between glyph and label → `space.s1` (4).
+    gap: theme.space.s1,
+    borderRadius: theme.radius.md,
+    overflow: "hidden",
+    variants: {
+      destructive: {
+        true: { backgroundColor: theme.color.danger },
+        false: { backgroundColor: theme.color.info }
+      }
+    }
+  },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    // Reference `font-weight:700;font-size:11px` → the `caption2` role at 700.
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.type.caption2.letterSpacing
+  }
+}));
+
+export { List, ListRow, SWIPE_ACTION_GAP, SWIPE_ACTION_PAD, SWIPE_ACTION_WIDTH, SWIPE_ARM_THRESHOLD, SWIPE_AXIS_LOCK_PX, SWIPE_COLLAPSE_MARGIN, SWIPE_COLLAPSE_REMOVE_MS, SWIPE_FLICK_VELOCITY, SWIPE_OVERSCROLL_DAMP, SWIPE_PROJECTION_S, SWIPE_SPRING_COMMIT, SWIPE_SPRING_SNAP, activeSwipeSide, armedActionWidth, clampSwipeOffset, dragAccessibilityActions, isSwipeArmed, lockSwipeAxis, normalizeSwipeActions, orderSwipeActions, railOrder, resolveSwipeAccessibilityAction, resolveSwipeRelease, swipeAccessibilityActions, swipeActionCollapses, swipeActionOpacity, swipeActionScale, swipeCommitAction, swipeOpenOffset, swipeProgress, swipeSideSign };