@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-OOPPQH27.js → chunk-EVOIGUBI.js}

@@ -1,48 +1,69 @@
-import { Thinking } from './chunk-XXXEFXY5.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Thinking } from './chunk-W74TXYFB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var STATE_META = {
-  idle: { icon: "check-circle", text: "Up to date", tone: "muted" },
-  typing: { icon: "edit", text: "Editing\u2026", tone: "muted" },
-  saving: { icon: "loader", text: "Saving\u2026", tone: "muted", spin: true },
-  saved: { icon: "check", text: "Saved", tone: "good" },
-  offline: { icon: "cloud-off", text: "Offline \u2014 changes queued", tone: "warn" },
-  error: { icon: "alert-triangle", text: "Couldn't save", tone: "danger" }
+  idle: { icon: "check-circle", tone: "muted" },
+  typing: { icon: "edit", tone: "muted" },
+  saving: { icon: "loader", tone: "muted", spin: true },
+  saved: { icon: "check", tone: "good" },
+  offline: { icon: "cloud-off", tone: "warn" },
+  error: { icon: "alert-triangle", tone: "danger" }
 };
-function formatSavedAt(value) {
+var DEFAULT_LABELS = {
+  states: {
+    idle: "Up to date",
+    typing: "Editing\u2026",
+    saving: "Saving\u2026",
+    saved: "Saved",
+    offline: "Offline \u2014 changes queued",
+    error: "Couldn't save"
+  },
+  savedAt: (ago) => `Saved \xB7 ${ago}`,
+  offlineQueued: (count) => `Offline \u2014 ${count} ${count === 1 ? "change" : "changes"} queued`,
+  justNow: "just now",
+  minutesAgo: (n) => `${n}m ago`,
+  hoursAgo: (n) => `${n}h ago`,
+  daysAgo: (n) => `${n}d ago`,
+  retry: "Retry"
+};
+function formatSavedAt(value, labels) {
   const then = typeof value === "number" ? value : value.getTime();
   const diff = Date.now() - then;
-  if (!Number.isFinite(then) || diff < 0) return "just now";
+  if (!Number.isFinite(then) || diff < 0) return labels.justNow;
   const sec = Math.floor(diff / 1e3);
-  if (sec < 45) return "just now";
+  if (sec < 45) return labels.justNow;
   const min = Math.floor(sec / 60);
-  if (min < 60) return `${min}m ago`;
+  if (min < 60) return labels.minutesAgo(min);
   const hr = Math.floor(min / 60);
-  if (hr < 24) return `${hr}h ago`;
-  return `${Math.floor(hr / 24)}d ago`;
+  if (hr < 24) return labels.hoursAgo(hr);
+  return labels.daysAgo(Math.floor(hr / 24));
 }
 function SaveStatus({
   status,
   savedAt,
+  queued,
   onRetry,
   variant = "inline",
   size = "md",
   motion = "full",
   accessibilityLabel,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("saveStatus", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { variant, size, tone: STATE_META[status].tone });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("save-status");
   const meta = STATE_META[status];
   const tone = meta.tone === "good" ? theme.color.good : meta.tone === "warn" ? theme.color.warn : meta.tone === "danger" ? theme.color.danger : theme.color.text2;
   const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
   const animate = motion === "full" && !theme.reduceMotion;
-  const label = status === "saved" && savedAt != null ? `Saved \xB7 ${formatSavedAt(savedAt)}` : meta.text;
+  const label = status === "saved" && savedAt != null ? labels.savedAt(formatSavedAt(savedAt, labels)) : status === "offline" && queued != null && queued > 0 ? labels.offlineQueued(queued) : labels.states[status];
   const chipPad = variant === "toolbar" ? {
     paddingHorizontal: size === "sm" ? theme.space.s2 : theme.space.s3,
     paddingVertical: size === "sm" ? theme.space.s1 : theme.space.s2
@@ -102,13 +123,16 @@ function SaveStatus({
           Pressable,
           {
             accessibilityRole: "button",
-            accessibilityLabel: "Retry",
+            accessibilityLabel: labels.retry,
             onPress: onRetry,
             hitSlop: 8,
-            style: ({ pressed }) => [styles.retry, pressed ? { opacity: theme.state.pressedOpacity } : null],
+            style: ({ pressed }) => [
+              styles.retry,
+              pressed ? { opacity: theme.state.pressedOpacity } : null
+            ],
             children: [
               /* @__PURE__ */ jsx(Icon, { name: "refresh", size: iconSize, color: theme.color.danger }),
-              /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: "Retry" })
+              /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: labels.retry })
             ]
           }
         ) : null

package/dist/{chunk-VEAYTRPX.js → chunk-EY4DD67D.js}

@@ -1,11 +1,32 @@
-import { Card, CardContent } from './chunk-KMI5ML5I.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useReorder, ROOT_SCROLLER } from './chunk-36EC2T6P.js';
+import { Card, CardContent } from './chunk-YXOAPXMU.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { View, ScrollView, Text, Pressable, Animated } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  board: "Board",
+  noCards: "No cards",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  movePrev: "Move to previous column",
+  moveNext: "Move to next column",
+  expand: (column, count) => `Expand ${column}, ${count} cards`,
+  collapse: (column) => `Collapse ${column}`,
+  columnName: (column, count) => `${column}, ${count} cards`,
+  cardList: (column) => `${column} cards`,
+  cardHint: (position, total, column) => `Position ${position} of ${total} in ${column}. Press and hold to drag, or use the arrow keys or actions to move it.`,
+  moved: (card, column, position, total) => `Moved ${card} to ${column}, position ${position} of ${total}.`,
+  overLimit: (column, count, limit) => ` ${column} is over its limit, ${count} of ${limit}.`,
+  movedNotice: (card) => `Moved ${card}`,
+  restored: (card, column) => `Restored ${card} to ${column}.`,
+  pickedUp: (card) => `Picked up ${card}.`,
+  droppedBack: (card) => `${card} dropped where it started.`
+};
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -14,12 +35,16 @@ function Board({
   renderCard,
   onMoveCard,
   onToggleColumn,
-  label = "Board",
+  label: labelProp,
   motion = "full",
-  style
+  onNotify,
+  style,
+  labels: labelsProp
 }) {
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.board;
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("board");
   const [cols, setCols] = React.useState(columns);
   React.useEffect(() => setCols(columns), [columns]);
   const [collapsed, setCollapsed] = React.useState(
@@ -38,7 +63,6 @@ function Board({
     if (w > 0) setPageW(w);
   };
   const [message, setMessage] = React.useState("");
-  const lift = motion === "full" && !theme.reduceMotion;
   const locate = (cardId) => {
     for (let c = 0; c < cols.length; c += 1) {
       const r = cols[c].items.findIndex((it) => it.id === cardId);
@@ -62,10 +86,64 @@ function Board({
     setCols(next);
     onMoveCard?.(cardId, fromColumnId, toColumnId, target);
     const destCol = next[toCol];
-    const over = destCol.wipLimit !== void 0 && destCol.items.length > destCol.wipLimit ? ` ${destCol.title} is over its limit, ${destCol.items.length} of ${destCol.wipLimit}.` : "";
+    const over = destCol.wipLimit !== void 0 && destCol.items.length > destCol.wipLimit ? labels.overLimit(destCol.title, destCol.items.length, destCol.wipLimit) : "";
     setMessage(
-      `Moved ${card.title} to ${destCol.title}, position ${target + 1} of ${destCol.items.length}.${over}`
+      labels.moved(card.title, destCol.title, target + 1, destCol.items.length) + over
     );
+    if (onNotify) {
+      const before = cols;
+      onNotify({
+        text: labels.movedNotice(card.title),
+        undo: () => {
+          setCols(before);
+          onMoveCard?.(cardId, toColumnId, fromColumnId, from.row);
+          setMessage(labels.restored(card.title, before[from.col].title));
+        }
+      });
+    }
+  };
+  const findCard = (cardId) => {
+    const at = locate(cardId);
+    return at ? { card: cols[at.col].items[at.row], column: cols[at.col] } : null;
+  };
+  const reorder = useReorder({
+    motion,
+    tilt: false,
+    // The default face is a `Card`, cornered at `radius.xl`.
+    radius: theme.radius.xl,
+    renderGhost: (cardId) => {
+      const found = findCard(cardId);
+      if (!found) return null;
+      return renderCard ? renderCard(found.card, found.column) : /* @__PURE__ */ jsx(CardBody, { card: found.card, lifted: true });
+    },
+    onLift: (cardId) => {
+      const found = findCard(cardId);
+      if (found) setMessage(labels.pickedUp(found.card.title));
+    },
+    // `to` counts without the card; within a column `moveCard` expects the
+    // index before it was taken out.
+    onMove: ({ id, fromGroup, toGroup, from, to }) => moveCard(id, toGroup, fromGroup === toGroup && to > from ? to + 1 : to),
+    onCancel: (cardId) => {
+      const found = findCard(cardId);
+      if (found) setMessage(labels.droppedBack(found.card.title));
+    }
+  });
+  const step = (cardId, dir) => {
+    const at = locate(cardId);
+    if (!at) return false;
+    const { col, row } = at;
+    if (dir === "up" || dir === "down") {
+      const to = dir === "up" ? row - 1 : row + 2;
+      if (to < 0 || to > cols[col].items.length) return false;
+      reorder.animate(() => moveCard(cardId, cols[col].id, to));
+      return true;
+    }
+    const dest = adjacentColumn(col, dir === "prev" ? -1 : 1);
+    if (dest < 0) return false;
+    reorder.animate(
+      () => moveCard(cardId, cols[dest].id, Math.min(row, cols[dest].items.length))
+    );
+    return true;
   };
   const toggleCollapsed = (columnId) => {
     setCollapsed((prev) => {
@@ -81,27 +159,14 @@ function Board({
     return -1;
   };
   const handleCardKey = (event, cardId) => {
-    const at = locate(cardId);
-    if (!at) return;
-    const { col, row } = at;
-    if (event.key === "ArrowUp") {
-      event.preventDefault?.();
-      moveCard(cardId, cols[col].id, row - 1);
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault?.();
-      moveCard(cardId, cols[col].id, row + 1);
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-      const dir = event.key === "ArrowLeft" !== theme.rtl ? -1 : 1;
-      const dest = adjacentColumn(col, dir);
-      if (dest < 0) return;
-      event.preventDefault?.();
-      moveCard(cardId, cols[dest].id, Math.min(row, cols[dest].items.length));
-    }
+    const dir = event.key === "ArrowUp" ? "up" : event.key === "ArrowDown" ? "down" : event.key === "ArrowLeft" || event.key === "ArrowRight" ? event.key === "ArrowLeft" !== theme.rtl ? "prev" : "next" : null;
+    if (dir && step(cardId, dir)) event.preventDefault?.();
   };
   return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: label, onLayout, style: [styles.root, style], children: [
     /* @__PURE__ */ jsx(
       ScrollView,
       {
+        ...reorder.scroller(ROOT_SCROLLER, { horizontal: true, page: pageW + theme.space.s3 }),
         horizontal: true,
         pagingEnabled: true,
         showsHorizontalScrollIndicator: false,
@@ -114,15 +179,18 @@ function Board({
             column,
             width: pageW,
             collapsed: collapsed[column.id] ?? false,
-            lift,
+            reorder,
             renderCard,
             onToggle: () => toggleCollapsed(column.id),
-            onCardKey: handleCardKey
+            onCardKey: handleCardKey,
+            onStep: step,
+            labels: labelsProp
           },
           column.id
         ))
       }
     ),
+    reorder.overlay,
     /* @__PURE__ */ jsx(
       View,
       {
@@ -139,13 +207,16 @@ function Column({
   column,
   width,
   collapsed,
-  lift,
+  reorder,
   renderCard,
   onToggle,
-  onCardKey
+  onCardKey,
+  onStep,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("board");
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
   const count = column.items.length;
   const over = column.wipLimit !== void 0 && count > column.wipLimit;
   const countLabel = column.wipLimit !== void 0 ? `${count} / ${column.wipLimit}` : `${count}`;
@@ -154,7 +225,7 @@ function Column({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `Expand ${column.title}, ${count} cards`,
+        accessibilityLabel: labels.expand(column.title, count),
         accessibilityState: { expanded: false },
         ...expandedProps(false),
         onPress: onToggle,
@@ -174,7 +245,7 @@ function Column({
     View,
     {
       role: "group",
-      accessibilityLabel: `${column.title}, ${count} cards`,
+      accessibilityLabel: labels.columnName(column.title, count),
       style: styles.column,
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
@@ -182,7 +253,7 @@ function Column({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: `Collapse ${column.title}`,
+              accessibilityLabel: labels.collapse(column.title),
               accessibilityState: { expanded: true },
               ...expandedProps(true),
               onPress: onToggle,
@@ -203,14 +274,24 @@ function Column({
         /* @__PURE__ */ jsx(
           ScrollView,
           {
+            ...reorder.scroller(column.id),
             role: "list",
-            contentContainerStyle: styles.list,
+            style: styles.listScroll,
+            contentContainerStyle: styles.listPad,
             showsVerticalScrollIndicator: false,
-            ...{ "aria-label": `${column.title} cards` },
-            children: count === 0 ? (
-              // The empty placeholder is the sole child of the `role="list"`, so it
-              // is a `listitem` too (a list may contain only listitems).
-              /* @__PURE__ */ jsx(View, { role: "listitem", style: styles.empty, children: /* @__PURE__ */ jsx(Text, { style: styles.emptyText, children: "No cards" }) })
+            ...{ "aria-label": labels.cardList(column.title) },
+            children: /* @__PURE__ */ jsx(View, { ...reorder.group(column.id), style: styles.list, children: count === 0 ? (
+              // The empty placeholder is the sole item of the `role="list"`, so it
+              // is a `listitem` too (a list may contain only listitems). While a
+              // card hovers this column the slot takes its place.
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  role: "listitem",
+                  style: [styles.empty, reorder.over === column.id && styles.emptyHidden],
+                  children: /* @__PURE__ */ jsx(Text, { style: styles.emptyText, children: labels.noCards })
+                }
+              )
             ) : column.items.map((card, row) => /* @__PURE__ */ jsx(
               CardCell,
               {
@@ -218,79 +299,69 @@ function Column({
                 column,
                 index: row,
                 total: count,
-                lift,
+                reorder,
                 renderCard,
-                onCardKey
+                onCardKey,
+                onStep,
+                labels: labelsProp
               },
               card.id
-            ))
+            )) })
           }
         )
       ]
     }
   ) });
 }
+var CARD_ACTION_NAMES = ["moveUp", "moveDown", "movePrev", "moveNext"];
+var ACTION_DIR = { moveUp: "up", moveDown: "down", movePrev: "prev", moveNext: "next" };
+function CardBody({
+  card,
+  lifted = false
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Card, { variant: "default", dragging: lifted, motion: "none", children: /* @__PURE__ */ jsxs(CardContent, { style: styles.cardBody, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, children: card.title }),
+    card.description ? /* @__PURE__ */ jsx(Text, { style: styles.cardDesc, children: card.description }) : null
+  ] }) });
+}
 function CardCell({
   card,
   column,
   index,
   total,
-  lift,
+  reorder,
   renderCard,
-  onCardKey
+  onCardKey,
+  onStep,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const [grabbed, setGrabbed] = React.useState(false);
-  const progress = React.useRef(new Animated.Value(0)).current;
-  const spring = (to) => {
-    Animated.spring(progress, {
-      toValue: to,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 6
-    }).start();
-  };
-  const scale = lift ? progress.interpolate({ inputRange: [0, 1], outputRange: [1, 1.022] }) : 1;
-  const rotate = lift ? progress.interpolate({
-    inputRange: [0, 1],
-    // `--mo-tilt` is 1.2deg; mirror its sign under RTL.
-    outputRange: ["0deg", theme.rtl ? "-1.2deg" : "1.2deg"]
-  }) : "0deg";
+  const theme = useLoamTheme("board");
+  const labels = useLabels("board", DEFAULT_LABELS, labelsProp);
+  const cardActions = CARD_ACTION_NAMES.map((name) => ({ name, label: labels[name] }));
   const keyProps = {
     onKeyDown: (event) => onCardKey(event, card.id)
   };
+  const onAction = (event) => {
+    const dir = ACTION_DIR[event.nativeEvent.actionName];
+    if (dir) onStep(card.id, dir);
+  };
   return (
     // The card cell is the list item — the column body is a `role="list"`, so its
     // direct children must each be a `listitem` (aria-required-children).
-    /* @__PURE__ */ jsx(Animated.View, { role: "listitem", style: { transform: [{ scale }, { rotate }] }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(card.id, column.id, index), children: /* @__PURE__ */ jsx(
       Pressable,
       {
+        ...reorder.press(card.id),
         accessibilityRole: "button",
         accessibilityLabel: card.title,
-        accessibilityHint: "Use the arrow keys to move this card between and within columns",
-        onPressIn: () => {
-          setGrabbed(true);
-          spring(1);
-        },
-        onPressOut: () => {
-          setGrabbed(false);
-          spring(0);
-        },
-        style: [styles.card, grabbed && styles.cardGrabbed],
+        accessibilityHint: labels.cardHint(index + 1, total, column.title),
+        accessibilityActions: cardActions,
+        onAccessibilityAction: onAction,
+        style: ({ pressed }) => [styles.card, pressed && { opacity: theme.state.pressedOpacity }],
         ...keyProps,
-        children: renderCard ? renderCard(card, column) : (
-          // `dragging` is what actually paints the grabbed state: `Card` renders
-          // `theme.state.dragged` as an `absoluteFill` overlay ON TOP of its own
-          // opaque surface, which a `backgroundColor` on this wrapper could never
-          // do (the Card paints straight over it) — the same reason the web twin
-          // uses an overlay span. `motion="none"` because the lift/tilt is already
-          // animated by the `Animated.View` above; `Card`'s own would double it.
-          /* @__PURE__ */ jsx(Card, { variant: "default", dragging: grabbed, motion: "none", children: /* @__PURE__ */ jsxs(CardContent, { style: styles.cardBody, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, children: card.title }),
-            card.description ? /* @__PURE__ */ jsx(Text, { style: styles.cardDesc, children: card.description }) : null
-          ] }) })
-        )
+        children: renderCard ? renderCard(card, column) : /* @__PURE__ */ jsx(CardBody, { card })
       }
     ) })
   );
@@ -347,7 +418,13 @@ var sheet = createStyleSheet((theme) => ({
     fontSize: theme.type.caption1.fontSize,
     color: theme.color.warnOnSoft
   },
-  list: { gap: theme.space.s2, paddingBottom: theme.space.s1 },
+  // A scroller clips its content, and a card's shadow reaches ~14px past it.
+  // Bleed the scroller out over the column's padding (and the header gap) and
+  // pad it back in, so the shadows fade out inside the clip instead of being
+  // cut into a hard-edged box.
+  listScroll: { margin: -theme.space.s3 },
+  listPad: { padding: theme.space.s3 },
+  list: { gap: theme.space.s2 },
   empty: {
     borderRadius: theme.radius.lg,
     borderWidth: theme.borderWidth.base,
@@ -356,22 +433,13 @@ var sheet = createStyleSheet((theme) => ({
     paddingVertical: theme.space.s5,
     alignItems: "center"
   },
+  emptyHidden: { opacity: 0 },
   emptyText: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.footnote.fontSize,
     color: theme.color.text3
   },
-  card: { borderRadius: theme.radius.lg },
-  // The grabbed card raises to the stronger shadow — the "picked up" read. The
-  // `--state-dragged` tint is NOT set here: this wrapper sits behind the card,
-  // whose surface is opaque, so a `backgroundColor` on it was never visible.
-  // `Card`'s `dragging` prop composites the tint over the surface instead.
-  // Under reduced motion there is no scale/tilt, but the state still changes so
-  // the gesture is not silent.
-  cardGrabbed: {
-    ...theme.shadow.lg,
-    borderRadius: theme.radius.lg
-  },
+  card: { borderRadius: theme.radius.xl },
   cardBody: { padding: theme.space.s3, gap: theme.space.s1 },
   cardTitle: {
     fontFamily: theme.font.sans,