@dloizides/ui-carousel 0.1.0

package/dist/index.mjs

@@ -0,0 +1,370 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { StyleSheet, View, Image, Text } from 'react-native';
+import { useUi } from '@dloizides/ui-feedback';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PressableScale } from '@dloizides/ui-motion';
+
+// src/CardDeck.tsx
+
+// src/constants.ts
+var DECK_TEST_ID_SUFFIX = {
+  card: "card",
+  image: "card-image",
+  rankBar: "rank-bar",
+  verdict: "verdict",
+  back: "back",
+  progress: "progress",
+  complete: "complete"
+};
+var KEY_BACK = "Backspace";
+var KEY_ARROW_LEFT = "ArrowLeft";
+var MAX_KEYBOARD_VERDICTS = 9;
+var DIGIT_RADIX = 10;
+var digitToVerdictIndex = (key) => {
+  if (key.length !== 1) {
+    return -1;
+  }
+  const parsed = Number.parseInt(key, DIGIT_RADIX);
+  const isVerdictDigit = Number.isInteger(parsed) && parsed >= 1 && parsed <= MAX_KEYBOARD_VERDICTS;
+  return isVerdictDigit ? parsed - 1 : -1;
+};
+var CARD_RADIUS = 12;
+var CARD_PADDING = 16;
+var CARD_GAP = 12;
+var CARD_BORDER_WIDTH = 1;
+var CARD_IMAGE_HEIGHT = 220;
+var TITLE_FONT_SIZE = 20;
+var SUBTITLE_FONT_SIZE = 14;
+var PROGRESS_FONT_SIZE = 13;
+var VERDICT_FONT_SIZE = 15;
+var VERDICT_MIN_HEIGHT = 48;
+var VERDICT_PADDING_H = 14;
+var styles = StyleSheet.create({
+  image: { borderRadius: CARD_RADIUS, height: CARD_IMAGE_HEIGHT, width: "100%" },
+  root: {
+    borderRadius: CARD_RADIUS,
+    borderWidth: CARD_BORDER_WIDTH,
+    gap: CARD_GAP,
+    padding: CARD_PADDING
+  },
+  subtitle: { fontSize: SUBTITLE_FONT_SIZE },
+  title: { fontSize: TITLE_FONT_SIZE, fontWeight: "700" }
+});
+var Card = ({
+  card,
+  testID,
+  imageTestID,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const { theme } = useUi();
+  const label = accessibilityLabel ?? card.title;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityHint,
+      accessibilityLabel: label,
+      style: [
+        styles.root,
+        { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }
+      ],
+      testID,
+      children: [
+        card.imageUrl !== void 0 && /* @__PURE__ */ jsx(
+          Image,
+          {
+            accessibilityIgnoresInvertColors: true,
+            accessibilityLabel: label,
+            source: { uri: card.imageUrl },
+            style: styles.image,
+            testID: imageTestID
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: theme.colors.text }], children: card.title }),
+        card.subtitle !== void 0 && /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, { color: theme.colors.textSecondary }], children: card.subtitle })
+      ]
+    }
+  );
+};
+var HOVER_OPACITY = 0.85;
+var FULL_OPACITY = 1;
+var styles2 = StyleSheet.create({
+  button: {
+    alignItems: "center",
+    borderRadius: CARD_RADIUS,
+    borderWidth: CARD_BORDER_WIDTH,
+    justifyContent: "center",
+    minHeight: VERDICT_MIN_HEIGHT,
+    paddingHorizontal: VERDICT_PADDING_H
+  },
+  buttonText: { fontSize: VERDICT_FONT_SIZE, fontWeight: "600" },
+  progress: { fontSize: PROGRESS_FONT_SIZE },
+  root: { gap: CARD_GAP },
+  row: { flexDirection: "row", flexWrap: "wrap", gap: CARD_GAP }
+});
+var VerdictButton = ({
+  verdict,
+  label,
+  hint,
+  testID,
+  onSelect
+}) => {
+  const { theme } = useUi();
+  const [hovered, setHovered] = useState(false);
+  const handleHoverIn = useCallback(() => setHovered(true), []);
+  const handleHoverOut = useCallback(() => setHovered(false), []);
+  const handlePress = useCallback(() => onSelect(verdict), [onSelect, verdict]);
+  return /* @__PURE__ */ jsx(
+    PressableScale,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      onHoverIn: handleHoverIn,
+      onHoverOut: handleHoverOut,
+      onPress: handlePress,
+      testID,
+      innerStyle: [
+        styles2.button,
+        {
+          backgroundColor: hovered ? theme.colors.surfaceElevated : theme.colors.surface,
+          borderColor: theme.colors.border,
+          opacity: hovered ? HOVER_OPACITY : FULL_OPACITY
+        }
+      ],
+      children: /* @__PURE__ */ jsx(Text, { style: [styles2.buttonText, { color: theme.colors.text }], children: label })
+    }
+  );
+};
+var RankBar = ({
+  verdicts,
+  labels,
+  onSelect,
+  onBack,
+  canGoBack,
+  position,
+  total,
+  testID,
+  backTestID,
+  progressTestID,
+  verdictTestIDPrefix
+}) => {
+  const { theme } = useUi();
+  const progressText = labels?.progress?.(position, total) ?? `${position} / ${total}`;
+  return /* @__PURE__ */ jsxs(View, { style: styles2.root, testID, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [styles2.progress, { color: theme.colors.textSecondary }],
+        testID: progressTestID,
+        children: progressText
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles2.row, children: verdicts.map((verdict) => /* @__PURE__ */ jsx(
+      VerdictButton,
+      {
+        hint: labels?.verdictHints?.[verdict] ?? verdict,
+        label: labels?.verdictLabels?.[verdict] ?? verdict,
+        onSelect,
+        testID: `${verdictTestIDPrefix}-${verdict}`,
+        verdict
+      },
+      verdict
+    )) }),
+    canGoBack && /* @__PURE__ */ jsx(
+      PressableScale,
+      {
+        accessibilityHint: labels?.backHint ?? labels?.backLabel ?? KEY_BACK_FALLBACK,
+        accessibilityLabel: labels?.backLabel ?? KEY_BACK_FALLBACK,
+        accessibilityRole: "button",
+        innerStyle: [styles2.button, { borderColor: theme.colors.border }],
+        onPress: onBack,
+        testID: backTestID,
+        children: /* @__PURE__ */ jsx(Text, { style: [styles2.buttonText, { color: theme.colors.textSecondary }], children: labels?.backLabel ?? KEY_BACK_FALLBACK })
+      }
+    )
+  ] });
+};
+var KEY_BACK_FALLBACK = "back";
+function useDeck({ cards, verdicts, onVerdict, onComplete }) {
+  const [index, setIndex] = useState(0);
+  const [answered, setAnswered] = useState({});
+  const indexRef = useRef(0);
+  const answeredRef = useRef({});
+  const inFlightRef = useRef(null);
+  const keyboardActivationRef = useRef(false);
+  const completedRef = useRef(false);
+  const total = cards.length;
+  const isComplete = index >= total;
+  useEffect(() => {
+    inFlightRef.current = null;
+  });
+  useEffect(() => {
+    if (!isComplete || completedRef.current) {
+      return;
+    }
+    completedRef.current = true;
+    onComplete();
+  }, [isComplete, onComplete]);
+  const emit = useCallback(
+    (verdict) => {
+      if (inFlightRef.current !== null) {
+        return;
+      }
+      const card = cards[indexRef.current];
+      if (card === void 0 || !verdicts.includes(verdict)) {
+        return;
+      }
+      if (answeredRef.current[card.id] !== void 0) {
+        return;
+      }
+      inFlightRef.current = card.id;
+      const nextAnswered = { ...answeredRef.current, [card.id]: verdict };
+      answeredRef.current = nextAnswered;
+      indexRef.current += 1;
+      setAnswered(nextAnswered);
+      setIndex(indexRef.current);
+      onVerdict(card.id, verdict);
+    },
+    [cards, verdicts, onVerdict]
+  );
+  const submitVerdict = useCallback(
+    (verdict) => {
+      if (keyboardActivationRef.current) {
+        return;
+      }
+      emit(verdict);
+    },
+    [emit]
+  );
+  const releaseKeyboardActivation = useCallback(() => {
+    keyboardActivationRef.current = false;
+  }, []);
+  const goBack = useCallback(() => {
+    if (indexRef.current === 0) {
+      return;
+    }
+    indexRef.current -= 1;
+    setIndex(indexRef.current);
+  }, []);
+  const handleKey = useCallback(
+    (key) => {
+      if (key === KEY_BACK || key === KEY_ARROW_LEFT) {
+        goBack();
+        return true;
+      }
+      const verdictIndex = digitToVerdictIndex(key);
+      if (verdictIndex < 0) {
+        return false;
+      }
+      const verdict = verdicts[verdictIndex];
+      if (verdict === void 0) {
+        return false;
+      }
+      keyboardActivationRef.current = true;
+      emit(verdict);
+      return true;
+    },
+    [goBack, emit, verdicts]
+  );
+  return useMemo(
+    () => ({
+      index,
+      current: cards[index],
+      total,
+      isComplete,
+      answered,
+      submitVerdict,
+      goBack,
+      handleKey,
+      releaseKeyboardActivation
+    }),
+    [
+      index,
+      cards,
+      total,
+      isComplete,
+      answered,
+      submitVerdict,
+      goBack,
+      handleKey,
+      releaseKeyboardActivation
+    ]
+  );
+}
+var styles3 = StyleSheet.create({
+  root: { gap: CARD_GAP }
+});
+var FIRST_POSITION_OFFSET = 1;
+var CardDeck = ({
+  cards,
+  verdicts,
+  onVerdict,
+  onComplete,
+  testID,
+  labels
+}) => {
+  const { theme } = useUi();
+  const deck = useDeck({ cards, verdicts, onVerdict, onComplete });
+  const { handleKey, releaseKeyboardActivation } = deck;
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return void 0;
+    }
+    const onKeyDown = (event) => {
+      if (handleKey(event.key)) {
+        event.preventDefault();
+      }
+    };
+    const onKeyUp = () => releaseKeyboardActivation();
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keyup", onKeyUp);
+    };
+  }, [handleKey, releaseKeyboardActivation]);
+  if (deck.current === void 0) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityLabel: labels?.cardHint,
+        style: [styles3.root, { backgroundColor: theme.colors.background }],
+        testID: `${testID}-${DECK_TEST_ID_SUFFIX.complete}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles3.root, { backgroundColor: theme.colors.background }], testID, children: [
+    /* @__PURE__ */ jsx(
+      Card,
+      {
+        accessibilityHint: labels?.cardHint,
+        accessibilityLabel: labels?.cardLabel?.(deck.current.title),
+        card: deck.current,
+        imageTestID: `${testID}-${DECK_TEST_ID_SUFFIX.image}`,
+        testID: `${testID}-${DECK_TEST_ID_SUFFIX.card}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RankBar,
+      {
+        backTestID: `${testID}-${DECK_TEST_ID_SUFFIX.back}`,
+        canGoBack: deck.index > 0,
+        labels,
+        onBack: deck.goBack,
+        onSelect: deck.submitVerdict,
+        position: deck.index + FIRST_POSITION_OFFSET,
+        progressTestID: `${testID}-${DECK_TEST_ID_SUFFIX.progress}`,
+        testID: `${testID}-${DECK_TEST_ID_SUFFIX.rankBar}`,
+        total: deck.total,
+        verdictTestIDPrefix: `${testID}-${DECK_TEST_ID_SUFFIX.verdict}`,
+        verdicts
+      }
+    )
+  ] });
+};
+
+export { Card, CardDeck, DECK_TEST_ID_SUFFIX, KEY_ARROW_LEFT, KEY_BACK, MAX_KEYBOARD_VERDICTS, RankBar, digitToVerdictIndex, useDeck };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/Card.tsx","../src/RankBar.tsx","../src/useDeck.ts","../src/CardDeck.tsx"],"names":["styles","StyleSheet","useUi","jsx","Text","jsxs","View","useState","useCallback","useEffect"],"mappings":";;;;;;;;;AAGO,IAAM,mBAAA,GAAsB;AAAA,EACjC,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,YAAA;AAAA,EACP,OAAA,EAAS,UAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM,MAAA;AAAA,EACN,QAAA,EAAU,UAAA;AAAA,EACV,QAAA,EAAU;AACZ;AAGO,IAAM,QAAA,GAAW;AACjB,IAAM,cAAA,GAAiB;AAGvB,IAAM,qBAAA,GAAwB;AACrC,IAAM,WAAA,GAAc,EAAA;AAGb,IAAM,mBAAA,GAAsB,CAAC,GAAA,KAAwB;AAC1D,EAAA,IAAI,GAAA,CAAI,WAAW,CAAA,EAAG;AACpB,IAAA,OAAO,EAAA;AAAA,EACT;AACA,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,QAAA,CAAS,GAAA,EAAK,WAAW,CAAA;AAC/C,EAAA,MAAM,iBAAiB,MAAA,CAAO,SAAA,CAAU,MAAM,CAAA,IAAK,MAAA,IAAU,KAAK,MAAA,IAAU,qBAAA;AAC5E,EAAA,OAAO,cAAA,GAAiB,SAAS,CAAA,GAAI,EAAA;AACvC;AAGO,IAAM,WAAA,GAAc,EAAA;AACpB,IAAM,YAAA,GAAe,EAAA;AACrB,IAAM,QAAA,GAAW,EAAA;AACjB,IAAM,iBAAA,GAAoB,CAAA;AAC1B,IAAM,iBAAA,GAAoB,GAAA;AAC1B,IAAM,eAAA,GAAkB,EAAA;AACxB,IAAM,kBAAA,GAAqB,EAAA;AAC3B,IAAM,kBAAA,GAAqB,EAAA;AAC3B,IAAM,iBAAA,GAAoB,EAAA;AAC1B,IAAM,kBAAA,GAAqB,EAAA;AAC3B,IAAM,iBAAA,GAAoB,EAAA;AClBjC,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,OAAO,EAAE,YAAA,EAAc,aAAa,MAAA,EAAQ,iBAAA,EAAmB,OAAO,MAAA,EAAO;AAAA,EAC7E,IAAA,EAAM;AAAA,IACJ,YAAA,EAAc,WAAA;AAAA,IACd,WAAA,EAAa,iBAAA;AAAA,IACb,GAAA,EAAK,QAAA;AAAA,IACL,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU,EAAE,QAAA,EAAU,kBAAA,EAAmB;AAAA,EACzC,KAAA,EAAO,EAAE,QAAA,EAAU,eAAA,EAAiB,YAAY,KAAA;AAClD,CAAC,CAAA;AAYM,IAAM,OAAO,CAAC;AAAA,EACnB,IAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAA,KAAqC;AACnC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,KAAA,EAAM;AACxB,EAAA,MAAM,KAAA,GAAQ,sBAAsB,IAAA,CAAK,KAAA;AACzC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAU,IAAA;AAAA,MACV,iBAAA;AAAA,MACA,kBAAA,EAAoB,KAAA;AAAA,MACpB,KAAA,EAAO;AAAA,QACL,MAAA,CAAO,IAAA;AAAA,QACP,EAAE,iBAAiB,KAAA,CAAM,MAAA,CAAO,SAAS,WAAA,EAAa,KAAA,CAAM,OAAO,MAAA;AAAO,OAC5E;AAAA,MACA,MAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,aAAa,MAAA,oBACjB,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,gCAAA,EAAgC,IAAA;AAAA,YAChC,kBAAA,EAAoB,KAAA;AAAA,YACpB,MAAA,EAAQ,EAAE,GAAA,EAAK,IAAA,CAAK,QAAA,EAAS;AAAA,YAC7B,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,wBAEF,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAO,CAAC,OAAO,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,EAAM,CAAA,EAAI,eAAK,KAAA,EAAM,CAAA;AAAA,QACtE,KAAK,QAAA,KAAa,MAAA,oBACjB,GAAA,CAAC,IAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,QAAA,EAAU,EAAE,OAAO,KAAA,CAAM,MAAA,CAAO,eAAe,CAAA,EAAI,eAAK,QAAA,EAAS;AAAA;AAAA;AAAA,GAE1F;AAEJ;ACrDA,IAAM,aAAA,GAAgB,IAAA;AACtB,IAAM,YAAA,GAAe,CAAA;AAErB,IAAMA,OAAAA,GAASC,WAAW,MAAA,CAAO;AAAA,EAC/B,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY,QAAA;AAAA,IACZ,YAAA,EAAc,WAAA;AAAA,IACd,WAAA,EAAa,iBAAA;AAAA,IACb,cAAA,EAAgB,QAAA;AAAA,IAChB,SAAA,EAAW,kBAAA;AAAA,IACX,iBAAA,EAAmB;AAAA,GACrB;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,iBAAA,EAAmB,YAAY,KAAA,EAAM;AAAA,EAC7D,QAAA,EAAU,EAAE,QAAA,EAAU,kBAAA,EAAmB;AAAA,EACzC,IAAA,EAAM,EAAE,GAAA,EAAK,QAAA,EAAS;AAAA,EACtB,KAAK,EAAE,aAAA,EAAe,OAAO,QAAA,EAAU,MAAA,EAAQ,KAAK,QAAA;AACtD,CAAC,CAAA;AAUD,IAAM,gBAAgB,CAAC;AAAA,EACrB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAA8C;AAC5C,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIC,KAAAA,EAAM;AACxB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,gBAAgB,WAAA,CAAY,MAAY,WAAW,IAAI,CAAA,EAAG,EAAE,CAAA;AAClE,EAAA,MAAM,iBAAiB,WAAA,CAAY,MAAY,WAAW,KAAK,CAAA,EAAG,EAAE,CAAA;AACpE,EAAA,MAAM,WAAA,GAAc,YAAY,MAAY,QAAA,CAAS,OAAO,CAAA,EAAG,CAAC,QAAA,EAAU,OAAO,CAAC,CAAA;AAClF,EAAA,uBACEC,GAAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAmB,IAAA;AAAA,MACnB,kBAAA,EAAoB,KAAA;AAAA,MACpB,iBAAA,EAAkB,QAAA;AAAA,MAClB,SAAA,EAAW,aAAA;AAAA,MACX,UAAA,EAAY,cAAA;AAAA,MACZ,OAAA,EAAS,WAAA;AAAA,MACT,MAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACVH,OAAAA,CAAO,MAAA;AAAA,QACP;AAAA,UACE,iBAAiB,OAAA,GAAU,KAAA,CAAM,MAAA,CAAO,eAAA,GAAkB,MAAM,MAAA,CAAO,OAAA;AAAA,UACvE,WAAA,EAAa,MAAM,MAAA,CAAO,MAAA;AAAA,UAC1B,OAAA,EAAS,UAAU,aAAA,GAAgB;AAAA;AACrC,OACF;AAAA,MAEA,QAAA,kBAAAG,GAAAA,CAACC,IAAAA,EAAA,EAAK,OAAO,CAACJ,OAAAA,CAAO,UAAA,EAAY,EAAE,OAAO,KAAA,CAAM,MAAA,CAAO,IAAA,EAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA,GACzE;AAEJ,CAAA;AAiBO,IAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAwC;AACtC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIE,KAAAA,EAAM;AACxB,EAAA,MAAM,YAAA,GAAe,QAAQ,QAAA,GAAW,QAAA,EAAU,KAAK,CAAA,IAAK,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAA;AAClF,EAAA,uBACEG,IAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAON,OAAAA,CAAO,MAAM,MAAA,EACxB,QAAA,EAAA;AAAA,oBAAAG,GAAAA;AAAA,MAACC,IAAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAACJ,OAAAA,CAAO,QAAA,EAAU,EAAE,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,aAAA,EAAe,CAAA;AAAA,QAC9D,MAAA,EAAQ,cAAA;AAAA,QAEP,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACAG,GAAAA,CAACG,IAAAA,EAAA,EAAK,KAAA,EAAON,OAAAA,CAAO,GAAA,EACjB,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,qBACbG,GAAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,MAAA,EAAQ,YAAA,GAAe,OAAO,CAAA,IAAK,OAAA;AAAA,QAEzC,KAAA,EAAO,MAAA,EAAQ,aAAA,GAAgB,OAAO,CAAA,IAAK,OAAA;AAAA,QAC3C,QAAA;AAAA,QACA,MAAA,EAAQ,CAAA,EAAG,mBAAmB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,QACzC;AAAA,OAAA;AAAA,MAJK;AAAA,KAMR,CAAA,EACH,CAAA;AAAA,IACC,6BACCA,GAAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAmB,MAAA,EAAQ,QAAA,IAAY,MAAA,EAAQ,SAAA,IAAa,iBAAA;AAAA,QAC5D,kBAAA,EAAoB,QAAQ,SAAA,IAAa,iBAAA;AAAA,QACzC,iBAAA,EAAkB,QAAA;AAAA,QAClB,UAAA,EAAY,CAACH,OAAAA,CAAO,MAAA,EAAQ,EAAE,WAAA,EAAa,KAAA,CAAM,MAAA,CAAO,MAAA,EAAQ,CAAA;AAAA,QAChE,OAAA,EAAS,MAAA;AAAA,QACT,MAAA,EAAQ,UAAA;AAAA,QAER,0BAAAG,GAAAA,CAACC,IAAAA,EAAA,EAAK,KAAA,EAAO,CAACJ,OAAAA,CAAO,UAAA,EAAY,EAAE,KAAA,EAAO,MAAM,MAAA,CAAO,aAAA,EAAe,CAAA,EACnE,QAAA,EAAA,MAAA,EAAQ,aAAa,iBAAA,EACxB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AAGA,IAAM,iBAAA,GAAoB,MAAA;AC9GnB,SAAS,QAAQ,EAAE,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,YAAW,EAAkC;AACjG,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIO,SAAS,CAAC,CAAA;AACpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,QAAAA,CAA2C,EAAE,CAAA;AAE7E,EAAA,MAAM,QAAA,GAAW,OAAO,CAAC,CAAA;AACzB,EAAA,MAAM,WAAA,GAAc,MAAA,CAAyC,EAAE,CAAA;AAE/D,EAAA,MAAM,WAAA,GAAc,OAAsB,IAAI,CAAA;AAE9C,EAAA,MAAM,qBAAA,GAAwB,OAAO,KAAK,CAAA;AAC1C,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,MAAM,QAAQ,KAAA,CAAM,MAAA;AACpB,EAAA,MAAM,aAAa,KAAA,IAAS,KAAA;AAI5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,EACxB,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAA,IAAc,YAAA,CAAa,OAAA,EAAS;AACvC,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,IAAA,UAAA,EAAW;AAAA,EACb,CAAA,EAAG,CAAC,UAAA,EAAY,UAAU,CAAC,CAAA;AAE3B,EAAA,MAAM,IAAA,GAAOC,WAAAA;AAAA,IACX,CAAC,OAAA,KAA0B;AACzB,MAAA,IAAI,WAAA,CAAY,YAAY,IAAA,EAAM;AAChC,QAAA;AAAA,MACF;AACA,MAAA,MAAM,IAAA,GAAO,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA;AACnC,MAAA,IAAI,SAAS,MAAA,IAAa,CAAC,QAAA,CAAS,QAAA,CAAS,OAAO,CAAA,EAAG;AACrD,QAAA;AAAA,MACF;AACA,MAAA,IAAI,WAAA,CAAY,OAAA,CAAQ,IAAA,CAAK,EAAE,MAAM,MAAA,EAAW;AAC9C,QAAA;AAAA,MACF;AACA,MAAA,WAAA,CAAY,UAAU,IAAA,CAAK,EAAA;AAC3B,MAAA,MAAM,YAAA,GAAe,EAAE,GAAG,WAAA,CAAY,SAAS,CAAC,IAAA,CAAK,EAAE,GAAG,OAAA,EAAQ;AAClE,MAAA,WAAA,CAAY,OAAA,GAAU,YAAA;AACtB,MAAA,QAAA,CAAS,OAAA,IAAW,CAAA;AACpB,MAAA,WAAA,CAAY,YAAY,CAAA;AACxB,MAAA,QAAA,CAAS,SAAS,OAAO,CAAA;AACzB,MAAA,SAAA,CAAU,IAAA,CAAK,IAAI,OAAO,CAAA;AAAA,IAC5B,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,QAAA,EAAU,SAAS;AAAA,GAC7B;AAQA,EAAA,MAAM,aAAA,GAAgBA,WAAAA;AAAA,IACpB,CAAC,OAAA,KAA0B;AACzB,MAAA,IAAI,sBAAsB,OAAA,EAAS;AACjC,QAAA;AAAA,MACF;AACA,MAAA,IAAA,CAAK,OAAO,CAAA;AAAA,IACd,CAAA;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,yBAAA,GAA4BA,YAAY,MAAY;AACxD,IAAA,qBAAA,CAAsB,OAAA,GAAU,KAAA;AAAA,EAClC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,MAAA,GAASA,YAAY,MAAY;AACrC,IAAA,IAAI,QAAA,CAAS,YAAY,CAAA,EAAG;AAC1B,MAAA;AAAA,IACF;AACA,IAAA,QAAA,CAAS,OAAA,IAAW,CAAA;AACpB,IAAA,QAAA,CAAS,SAAS,OAAO,CAAA;AAAA,EAC3B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,SAAA,GAAYA,WAAAA;AAAA,IAChB,CAAC,GAAA,KAAyB;AACxB,MAAA,IAAI,GAAA,KAAQ,QAAA,IAAY,GAAA,KAAQ,cAAA,EAAgB;AAC9C,QAAA,MAAA,EAAO;AACP,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,MAAM,YAAA,GAAe,oBAAoB,GAAG,CAAA;AAC5C,MAAA,IAAI,eAAe,CAAA,EAAG;AACpB,QAAA,OAAO,KAAA;AAAA,MACT;AACA,MAAA,MAAM,OAAA,GAAU,SAAS,YAAY,CAAA;AACrC,MAAA,IAAI,YAAY,MAAA,EAAW;AACzB,QAAA,OAAO,KAAA;AAAA,MACT;AACA,MAAA,qBAAA,CAAsB,OAAA,GAAU,IAAA;AAChC,MAAA,IAAA,CAAK,OAAO,CAAA;AACZ,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,MAAA,EAAQ,IAAA,EAAM,QAAQ;AAAA,GACzB;AAEA,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,MAAM,KAAK,CAAA;AAAA,MACpB,KAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF,GACF;AACF;ACtJA,IAAMR,OAAAA,GAASC,WAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM,EAAE,GAAA,EAAK,QAAA;AACf,CAAC,CAAA;AAED,IAAM,qBAAA,GAAwB,CAAA;AAEvB,IAAM,WAAW,CAAC;AAAA,EACvB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAAyC;AACvC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAIC,KAAAA,EAAM;AACxB,EAAA,MAAM,OAAO,OAAA,CAAQ,EAAE,OAAO,QAAA,EAAU,SAAA,EAAW,YAAY,CAAA;AAC/D,EAAA,MAAM,EAAE,SAAA,EAAW,yBAAA,EAA0B,GAAI,IAAA;AAEjD,EAAAO,UAAU,MAAM;AACd,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACnC,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAA+B;AAChD,MAAA,IAAI,SAAA,CAAU,KAAA,CAAM,GAAG,CAAA,EAAG;AACxB,QAAA,KAAA,CAAM,cAAA,EAAe;AAAA,MACvB;AAAA,IACF,CAAA;AAGA,IAAA,MAAM,OAAA,GAAU,MAAY,yBAAA,EAA0B;AACtD,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,QAAA,CAAS,gBAAA,CAAiB,SAAS,OAAO,CAAA;AAC1C,IAAA,OAAO,MAAY;AACjB,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AACjD,MAAA,QAAA,CAAS,mBAAA,CAAoB,SAAS,OAAO,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,yBAAyB,CAAC,CAAA;AAEzC,EAAA,IAAI,IAAA,CAAK,YAAY,MAAA,EAAW;AAC9B,IAAA,uBACEN,GAAAA;AAAA,MAACG,IAAAA;AAAA,MAAA;AAAA,QACC,oBAAoB,MAAA,EAAQ,QAAA;AAAA,QAC5B,KAAA,EAAO,CAACN,OAAAA,CAAO,IAAA,EAAM,EAAE,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,QACjE,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,QAAQ,CAAA;AAAA;AAAA,KACnD;AAAA,EAEJ;AAEA,EAAA,uBACEK,IAAAA,CAACC,IAAAA,EAAA,EAAK,OAAO,CAACN,OAAAA,CAAO,IAAA,EAAM,EAAE,iBAAiB,KAAA,CAAM,MAAA,CAAO,UAAA,EAAY,GAAG,MAAA,EACxE,QAAA,EAAA;AAAA,oBAAAG,GAAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,mBAAmB,MAAA,EAAQ,QAAA;AAAA,QAC3B,kBAAA,EAAoB,MAAA,EAAQ,SAAA,GAAY,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,QAC1D,MAAM,IAAA,CAAK,OAAA;AAAA,QACX,WAAA,EAAa,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,KAAK,CAAA,CAAA;AAAA,QACnD,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,IAAI,CAAA;AAAA;AAAA,KAC/C;AAAA,oBACAA,GAAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,IAAI,CAAA,CAAA;AAAA,QACjD,SAAA,EAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,QACxB,MAAA;AAAA,QACA,QAAQ,IAAA,CAAK,MAAA;AAAA,QACb,UAAU,IAAA,CAAK,aAAA;AAAA,QACf,QAAA,EAAU,KAAK,KAAA,GAAQ,qBAAA;AAAA,QACvB,cAAA,EAAgB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,QAAQ,CAAA,CAAA;AAAA,QACzD,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,OAAO,CAAA,CAAA;AAAA,QAChD,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,mBAAA,EAAqB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,oBAAoB,OAAO,CAAA,CAAA;AAAA,QAC7D;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ","file":"index.mjs","sourcesContent":["/** Test ids, key names and layout metrics for the deck. Nothing here is a colour. */\n\n/** Stable test id suffixes. Each is appended to the caller-supplied `testID`. */\nexport const DECK_TEST_ID_SUFFIX = {\n  card: 'card',\n  image: 'card-image',\n  rankBar: 'rank-bar',\n  verdict: 'verdict',\n  back: 'back',\n  progress: 'progress',\n  complete: 'complete',\n} as const;\n\n/** Keys that navigate rather than rank. */\nexport const KEY_BACK = 'Backspace';\nexport const KEY_ARROW_LEFT = 'ArrowLeft';\n\n/** Digit keys 1..9 pick the nth verdict. The deck never exposes more than nine. */\nexport const MAX_KEYBOARD_VERDICTS = 9;\nconst DIGIT_RADIX = 10;\n\n/** Parse a 1..9 digit key into a 0-based verdict index, or -1 when it is not one. */\nexport const digitToVerdictIndex = (key: string): number => {\n  if (key.length !== 1) {\n    return -1;\n  }\n  const parsed = Number.parseInt(key, DIGIT_RADIX);\n  const isVerdictDigit = Number.isInteger(parsed) && parsed >= 1 && parsed <= MAX_KEYBOARD_VERDICTS;\n  return isVerdictDigit ? parsed - 1 : -1;\n};\n\n/** Layout metrics (spacing and sizing only: colours come from the theme). */\nexport const CARD_RADIUS = 12;\nexport const CARD_PADDING = 16;\nexport const CARD_GAP = 12;\nexport const CARD_BORDER_WIDTH = 1;\nexport const CARD_IMAGE_HEIGHT = 220;\nexport const TITLE_FONT_SIZE = 20;\nexport const SUBTITLE_FONT_SIZE = 14;\nexport const PROGRESS_FONT_SIZE = 13;\nexport const VERDICT_FONT_SIZE = 15;\nexport const VERDICT_MIN_HEIGHT = 48;\nexport const VERDICT_PADDING_H = 14;\nexport const HINT_FONT_SIZE = 12;\n","/**\n * Card — the presentation face of one deck entry.\n *\n * Deliberately NOT interactive: ranking happens in `RankBar`, so there is exactly one\n * place a verdict can be emitted from. `imageUrl` is optional and a missing cover\n * renders as a typographic card rather than a broken image box.\n */\nimport React from 'react';\n\nimport { Image, StyleSheet, Text, View } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nimport {\n  CARD_BORDER_WIDTH,\n  CARD_GAP,\n  CARD_IMAGE_HEIGHT,\n  CARD_PADDING,\n  CARD_RADIUS,\n  SUBTITLE_FONT_SIZE,\n  TITLE_FONT_SIZE,\n} from './constants';\nimport type { DeckCard } from './types';\n\nconst styles = StyleSheet.create({\n  image: { borderRadius: CARD_RADIUS, height: CARD_IMAGE_HEIGHT, width: '100%' },\n  root: {\n    borderRadius: CARD_RADIUS,\n    borderWidth: CARD_BORDER_WIDTH,\n    gap: CARD_GAP,\n    padding: CARD_PADDING,\n  },\n  subtitle: { fontSize: SUBTITLE_FONT_SIZE },\n  title: { fontSize: TITLE_FONT_SIZE, fontWeight: '700' },\n});\n\nexport interface CardProps {\n  card: DeckCard;\n  testID: string;\n  imageTestID: string;\n  /** Already-localized region label. Falls back to the card title. */\n  accessibilityLabel?: string;\n  /** Already-localized region hint telling the user how to rank. */\n  accessibilityHint?: string;\n}\n\nexport const Card = ({\n  card,\n  testID,\n  imageTestID,\n  accessibilityLabel,\n  accessibilityHint,\n}: CardProps): React.ReactElement => {\n  const { theme } = useUi();\n  const label = accessibilityLabel ?? card.title;\n  return (\n    <View\n      accessible\n      accessibilityHint={accessibilityHint}\n      accessibilityLabel={label}\n      style={[\n        styles.root,\n        { backgroundColor: theme.colors.surface, borderColor: theme.colors.border },\n      ]}\n      testID={testID}\n    >\n      {card.imageUrl !== undefined && (\n        <Image\n          accessibilityIgnoresInvertColors\n          accessibilityLabel={label}\n          source={{ uri: card.imageUrl }}\n          style={styles.image}\n          testID={imageTestID}\n        />\n      )}\n      <Text style={[styles.title, { color: theme.colors.text }]}>{card.title}</Text>\n      {card.subtitle !== undefined && (\n        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>{card.subtitle}</Text>\n      )}\n    </View>\n  );\n};\n\nexport default Card;\n","/**\n * RankBar — the verdict buttons, the back control and the progress line.\n *\n * Built on `PressableScale` (a `Pressable`), NEVER `TouchableOpacity`: RN-web silently\n * drops `onHoverIn` / `onHoverOut` on TouchableOpacity, so a hover affordance written\n * that way is dead on the web build with no error to find it by.\n *\n * Every control carries testID + accessibilityLabel + accessibilityHint. The labels are\n * caller-supplied and already localized; a missing one falls back to the verdict id.\n */\nimport React, { useCallback, useState } from 'react';\n\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\nimport { PressableScale } from '@dloizides/ui-motion';\n\nimport {\n  CARD_BORDER_WIDTH,\n  CARD_GAP,\n  CARD_RADIUS,\n  PROGRESS_FONT_SIZE,\n  VERDICT_FONT_SIZE,\n  VERDICT_MIN_HEIGHT,\n  VERDICT_PADDING_H,\n} from './constants';\nimport type { DeckLabels } from './types';\n\nconst HOVER_OPACITY = 0.85;\nconst FULL_OPACITY = 1;\n\nconst styles = StyleSheet.create({\n  button: {\n    alignItems: 'center',\n    borderRadius: CARD_RADIUS,\n    borderWidth: CARD_BORDER_WIDTH,\n    justifyContent: 'center',\n    minHeight: VERDICT_MIN_HEIGHT,\n    paddingHorizontal: VERDICT_PADDING_H,\n  },\n  buttonText: { fontSize: VERDICT_FONT_SIZE, fontWeight: '600' },\n  progress: { fontSize: PROGRESS_FONT_SIZE },\n  root: { gap: CARD_GAP },\n  row: { flexDirection: 'row', flexWrap: 'wrap', gap: CARD_GAP },\n});\n\ninterface VerdictButtonProps {\n  verdict: string;\n  label: string;\n  hint: string;\n  testID: string;\n  onSelect: (verdict: string) => void;\n}\n\nconst VerdictButton = ({\n  verdict,\n  label,\n  hint,\n  testID,\n  onSelect,\n}: VerdictButtonProps): React.ReactElement => {\n  const { theme } = useUi();\n  const [hovered, setHovered] = useState(false);\n  // onHoverIn / onHoverOut only survive on a Pressable. This is the trap in one place.\n  const handleHoverIn = useCallback((): void => setHovered(true), []);\n  const handleHoverOut = useCallback((): void => setHovered(false), []);\n  const handlePress = useCallback((): void => onSelect(verdict), [onSelect, verdict]);\n  return (\n    <PressableScale\n      accessibilityHint={hint}\n      accessibilityLabel={label}\n      accessibilityRole=\"button\"\n      onHoverIn={handleHoverIn}\n      onHoverOut={handleHoverOut}\n      onPress={handlePress}\n      testID={testID}\n      innerStyle={[\n        styles.button,\n        {\n          backgroundColor: hovered ? theme.colors.surfaceElevated : theme.colors.surface,\n          borderColor: theme.colors.border,\n          opacity: hovered ? HOVER_OPACITY : FULL_OPACITY,\n        },\n      ]}\n    >\n      <Text style={[styles.buttonText, { color: theme.colors.text }]}>{label}</Text>\n    </PressableScale>\n  );\n};\n\nexport interface RankBarProps {\n  verdicts: readonly string[];\n  labels?: DeckLabels;\n  onSelect: (verdict: string) => void;\n  onBack: () => void;\n  canGoBack: boolean;\n  /** 1-based position of the current card. */\n  position: number;\n  total: number;\n  testID: string;\n  backTestID: string;\n  progressTestID: string;\n  verdictTestIDPrefix: string;\n}\n\nexport const RankBar = ({\n  verdicts,\n  labels,\n  onSelect,\n  onBack,\n  canGoBack,\n  position,\n  total,\n  testID,\n  backTestID,\n  progressTestID,\n  verdictTestIDPrefix,\n}: RankBarProps): React.ReactElement => {\n  const { theme } = useUi();\n  const progressText = labels?.progress?.(position, total) ?? `${position} / ${total}`;\n  return (\n    <View style={styles.root} testID={testID}>\n      <Text\n        style={[styles.progress, { color: theme.colors.textSecondary }]}\n        testID={progressTestID}\n      >\n        {progressText}\n      </Text>\n      <View style={styles.row}>\n        {verdicts.map((verdict) => (\n          <VerdictButton\n            hint={labels?.verdictHints?.[verdict] ?? verdict}\n            key={verdict}\n            label={labels?.verdictLabels?.[verdict] ?? verdict}\n            onSelect={onSelect}\n            testID={`${verdictTestIDPrefix}-${verdict}`}\n            verdict={verdict}\n          />\n        ))}\n      </View>\n      {canGoBack && (\n        <PressableScale\n          accessibilityHint={labels?.backHint ?? labels?.backLabel ?? KEY_BACK_FALLBACK}\n          accessibilityLabel={labels?.backLabel ?? KEY_BACK_FALLBACK}\n          accessibilityRole=\"button\"\n          innerStyle={[styles.button, { borderColor: theme.colors.border }]}\n          onPress={onBack}\n          testID={backTestID}\n        >\n          <Text style={[styles.buttonText, { color: theme.colors.textSecondary }]}>\n            {labels?.backLabel ?? KEY_BACK_FALLBACK}\n          </Text>\n        </PressableScale>\n      )}\n    </View>\n  );\n};\n\n/** Machine-readable fallback. Apps pass a localized `backLabel`. */\nconst KEY_BACK_FALLBACK = 'back';\n\nexport default RankBar;\n","/**\n * `useDeck` — every decision the card deck makes, with no rendering in it.\n *\n * Two RN-web traps are the reason this lives in a package rather than in an app:\n *\n *  - **Keyboard activation does not arrive as `onPress`.** A browser can deliver the\n *    key event AND synthesize a click from the same key press, which lands two\n *    verdicts in one tick. `inFlightRef` latches the emission for the card and is\n *    released only after React commits the advance, so the second path is a no-op.\n *  - **A card is answered exactly once.** Navigating back to a ranked card shows the\n *    verdict, it does not reopen it — otherwise going back and forth silently\n *    re-emits verdicts the caller has already recorded.\n */\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { KEY_ARROW_LEFT, KEY_BACK, digitToVerdictIndex } from './constants';\nimport type { DeckCard } from './types';\n\nexport interface UseDeckOptions {\n  cards: DeckCard[];\n  /** Ordered verdict ids. Keyboard 1..n selects the nth. */\n  verdicts: readonly string[];\n  onVerdict: (cardId: string, verdict: string) => void;\n  onComplete: () => void;\n}\n\nexport interface UseDeckResult {\n  /** 0-based position. Equals `cards.length` once the deck is finished. */\n  index: number;\n  /** The card awaiting a verdict, or `undefined` when the deck is finished. */\n  current: DeckCard | undefined;\n  total: number;\n  isComplete: boolean;\n  /** cardId to verdict, for every card ranked so far. */\n  answered: Readonly<Record<string, string>>;\n  /** Rank the current card. Ignored when it is already ranked or an emission is in flight. */\n  submitVerdict: (verdict: string) => void;\n  /** Step back one card. A no-op on the first card. */\n  goBack: () => void;\n  /** Route a raw key name from keydown. Returns true when the deck consumed it. */\n  handleKey: (key: string) => boolean;\n  /**\n   * Release the keyboard-activation latch. Bind to keyup: the click a browser\n   * synthesizes from a key press arrives BEFORE keyup, which is what makes this the\n   * window that suppresses it.\n   */\n  releaseKeyboardActivation: () => void;\n}\n\nexport function useDeck({ cards, verdicts, onVerdict, onComplete }: UseDeckOptions): UseDeckResult {\n  const [index, setIndex] = useState(0);\n  const [answered, setAnswered] = useState<Readonly<Record<string, string>>>({});\n\n  const indexRef = useRef(0);\n  const answeredRef = useRef<Readonly<Record<string, string>>>({});\n  /** Holds the card id whose verdict is mid-emission. Released on the next commit. */\n  const inFlightRef = useRef<string | null>(null);\n  /** True from a rank keydown until the matching keyup. See `submitVerdict`. */\n  const keyboardActivationRef = useRef(false);\n  const completedRef = useRef(false);\n\n  const total = cards.length;\n  const isComplete = index >= total;\n\n  // Release the latch only after React has committed the advance. Anything that fires\n  // inside the SAME tick as the first emission (the synthesized click) finds it set.\n  useEffect(() => {\n    inFlightRef.current = null;\n  });\n\n  useEffect(() => {\n    if (!isComplete || completedRef.current) {\n      return;\n    }\n    completedRef.current = true;\n    onComplete();\n  }, [isComplete, onComplete]);\n\n  const emit = useCallback(\n    (verdict: string): void => {\n      if (inFlightRef.current !== null) {\n        return;\n      }\n      const card = cards[indexRef.current];\n      if (card === undefined || !verdicts.includes(verdict)) {\n        return;\n      }\n      if (answeredRef.current[card.id] !== undefined) {\n        return;\n      }\n      inFlightRef.current = card.id;\n      const nextAnswered = { ...answeredRef.current, [card.id]: verdict };\n      answeredRef.current = nextAnswered;\n      indexRef.current += 1;\n      setAnswered(nextAnswered);\n      setIndex(indexRef.current);\n      onVerdict(card.id, verdict);\n    },\n    [cards, verdicts, onVerdict],\n  );\n\n  /**\n   * The POINTER path. Suppressed while a keyboard activation is still open, because\n   * RN-web keyboard activation does not arrive as `onPress`: the browser delivers the\n   * key event and then synthesizes a click from the same press. React commits between\n   * the two, so the in-flight latch alone cannot see it — this one spans the commit.\n   */\n  const submitVerdict = useCallback(\n    (verdict: string): void => {\n      if (keyboardActivationRef.current) {\n        return;\n      }\n      emit(verdict);\n    },\n    [emit],\n  );\n\n  const releaseKeyboardActivation = useCallback((): void => {\n    keyboardActivationRef.current = false;\n  }, []);\n\n  const goBack = useCallback((): void => {\n    if (indexRef.current === 0) {\n      return;\n    }\n    indexRef.current -= 1;\n    setIndex(indexRef.current);\n  }, []);\n\n  const handleKey = useCallback(\n    (key: string): boolean => {\n      if (key === KEY_BACK || key === KEY_ARROW_LEFT) {\n        goBack();\n        return true;\n      }\n      const verdictIndex = digitToVerdictIndex(key);\n      if (verdictIndex < 0) {\n        return false;\n      }\n      const verdict = verdicts[verdictIndex];\n      if (verdict === undefined) {\n        return false;\n      }\n      keyboardActivationRef.current = true;\n      emit(verdict);\n      return true;\n    },\n    [goBack, emit, verdicts],\n  );\n\n  return useMemo(\n    () => ({\n      index,\n      current: cards[index],\n      total,\n      isComplete,\n      answered,\n      submitVerdict,\n      goBack,\n      handleKey,\n      releaseKeyboardActivation,\n    }),\n    [\n      index,\n      cards,\n      total,\n      isComplete,\n      answered,\n      submitVerdict,\n      goBack,\n      handleKey,\n      releaseKeyboardActivation,\n    ],\n  );\n}\n","/**\n * CardDeck — a ranked card deck that is fully operable by keyboard alone.\n *\n * `1..n` rank the current card with the nth verdict, `Backspace` / `ArrowLeft` step\n * back. The listener is attached to the document on web, so the deck works without\n * the user having to tab into it first; every verdict still routes through the same\n * `useDeck.submitVerdict`, which holds the single in-flight latch. That is what stops\n * a browser-synthesized click from turning one key press into two verdicts.\n *\n * Colours come from the app UiProvider theme (`@dloizides/design-tokens`). There is not\n * one colour literal in this package.\n */\nimport React, { useEffect } from 'react';\n\nimport { StyleSheet, View } from 'react-native';\n\nimport { useUi } from '@dloizides/ui-feedback';\n\nimport { Card } from './Card';\nimport { RankBar } from './RankBar';\nimport { CARD_GAP, DECK_TEST_ID_SUFFIX } from './constants';\nimport type { CardDeckProps } from './types';\nimport { useDeck } from './useDeck';\n\nconst styles = StyleSheet.create({\n  root: { gap: CARD_GAP },\n});\n\nconst FIRST_POSITION_OFFSET = 1;\n\nexport const CardDeck = ({\n  cards,\n  verdicts,\n  onVerdict,\n  onComplete,\n  testID,\n  labels,\n}: CardDeckProps): React.ReactElement => {\n  const { theme } = useUi();\n  const deck = useDeck({ cards, verdicts, onVerdict, onComplete });\n  const { handleKey, releaseKeyboardActivation } = deck;\n\n  useEffect(() => {\n    if (typeof document === 'undefined') {\n      return undefined;\n    }\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (handleKey(event.key)) {\n        event.preventDefault();\n      }\n    };\n    // keyup closes the window in which a synthesized click is suppressed. Without it\n    // one key press ranks two cards: the key event, then the click the browser makes.\n    const onKeyUp = (): void => releaseKeyboardActivation();\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('keyup', onKeyUp);\n    return (): void => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('keyup', onKeyUp);\n    };\n  }, [handleKey, releaseKeyboardActivation]);\n\n  if (deck.current === undefined) {\n    return (\n      <View\n        accessibilityLabel={labels?.cardHint}\n        style={[styles.root, { backgroundColor: theme.colors.background }]}\n        testID={`${testID}-${DECK_TEST_ID_SUFFIX.complete}`}\n      />\n    );\n  }\n\n  return (\n    <View style={[styles.root, { backgroundColor: theme.colors.background }]} testID={testID}>\n      <Card\n        accessibilityHint={labels?.cardHint}\n        accessibilityLabel={labels?.cardLabel?.(deck.current.title)}\n        card={deck.current}\n        imageTestID={`${testID}-${DECK_TEST_ID_SUFFIX.image}`}\n        testID={`${testID}-${DECK_TEST_ID_SUFFIX.card}`}\n      />\n      <RankBar\n        backTestID={`${testID}-${DECK_TEST_ID_SUFFIX.back}`}\n        canGoBack={deck.index > 0}\n        labels={labels}\n        onBack={deck.goBack}\n        onSelect={deck.submitVerdict}\n        position={deck.index + FIRST_POSITION_OFFSET}\n        progressTestID={`${testID}-${DECK_TEST_ID_SUFFIX.progress}`}\n        testID={`${testID}-${DECK_TEST_ID_SUFFIX.rankBar}`}\n        total={deck.total}\n        verdictTestIDPrefix={`${testID}-${DECK_TEST_ID_SUFFIX.verdict}`}\n        verdicts={verdicts}\n      />\n    </View>\n  );\n};\n\nexport default CardDeck;\n"]}

package/package.json

@@ -0,0 +1,112 @@
+{
+    "name": "@dloizides/ui-carousel",
+    "version": "0.1.0",
+    "description": "Themable, brand-agnostic React Native (RN-web) swipeable card deck with per-card ranking verdicts. Keyboard-first (1..n picks a verdict, arrows/Backspace navigate), Pressable-based so hover survives on RN-web, and guarded by a single in-flight ref so a keyboard activation can never double-fire a verdict. Colours come from the UiProvider theme (@dloizides/design-tokens). Part of the dloizides.com shared UI kit.",
+    "keywords": [
+        "react",
+        "react-native",
+        "react-native-web",
+        "ui",
+        "carousel",
+        "card-deck",
+        "ranking",
+        "accessibility",
+        "keyboard",
+        "dloizides"
+    ],
+    "author": "dloizides",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/openmindednewby/ui-carousel.git"
+    },
+    "homepage": "https://github.com/openmindednewby/ui-carousel#readme",
+    "bugs": {
+        "url": "https://github.com/openmindednewby/ui-carousel/issues"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "react-native": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "browser": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "import": {
+                "types": "./dist/index.d.mts",
+                "default": "./dist/index.mjs"
+            },
+            "default": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            }
+        }
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "sideEffects": false,
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "scripts": {
+        "build": "rimraf dist && tsup",
+        "build:watch": "tsup --watch",
+        "test": "jest",
+        "test:coverage": "jest --coverage",
+        "lint": "eslint src --ext .ts,.tsx",
+        "lint:fix": "eslint src --ext .ts,.tsx --fix",
+        "typecheck": "tsc --noEmit",
+        "clean": "rimraf dist",
+        "security:audit": "npm audit --audit-level=high",
+        "deps:outdated": "npm outdated || exit 0",
+        "deps:unused": "npx depcheck --ignores \"@types/jest,@types/node,@types/react,@types/react-dom,rimraf,react-native\"",
+        "prepublishOnly": "npm run clean && npm run build && npm run test",
+        "version": "npm run build"
+    },
+    "dependencies": {
+        "@dloizides/ui-motion": "^1.0.2"
+    },
+    "peerDependencies": {
+        "@dloizides/ui-feedback": ">=1.2.0",
+        "react": ">=18.0.0",
+        "react-native": ">=0.74.0"
+    },
+    "devDependencies": {
+        "@dloizides/ui-feedback": "file:../ui-feedback",
+        "@dloizides/ui-motion": "file:../ui-motion",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
+        "@types/jest": "^29.5.0",
+        "@types/node": "^20.19.32",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-native": "0.81.5",
+        "react-native-web": "^0.21.0",
+        "rimraf": "^5.0.0",
+        "ts-jest": "^29.1.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.4.0"
+    }
+}