@summa-ui/surah-picker 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BookIcon: () => BookIcon,
+  ChevronDownIcon: () => ChevronDownIcon,
+  Popup: () => Popup,
+  SURAH_LIST: () => SURAH_LIST,
+  SurahFieldPicker: () => SurahFieldPicker,
+  SurahRangePicker: () => SurahRangePicker,
+  SurahWheelPicker: () => SurahWheelPicker,
+  defaultLabels: () => defaultLabels,
+  getAyatCount: () => getAyatCount,
+  getSurah: () => getSurah,
+  resolveLabels: () => resolveLabels
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core/SurahWheelPicker.tsx
+var import_react = require("react");
+
+// src/data/quran.ts
+var SURAH_LIST = [
+  { number: 1, name: "Al-Fatihah", arabic: "\u0627\u0644\u0641\u0627\u062A\u062D\u0629", ayatCount: 7 },
+  { number: 2, name: "Al-Baqarah", arabic: "\u0627\u0644\u0628\u0642\u0631\u0629", ayatCount: 286 },
+  { number: 3, name: "Ali Imran", arabic: "\u0622\u0644 \u0639\u0645\u0631\u0627\u0646", ayatCount: 200 },
+  { number: 4, name: "An-Nisa", arabic: "\u0627\u0644\u0646\u0633\u0627\u0621", ayatCount: 176 },
+  { number: 5, name: "Al-Maidah", arabic: "\u0627\u0644\u0645\u0627\u0626\u062F\u0629", ayatCount: 120 },
+  { number: 6, name: "Al-An'am", arabic: "\u0627\u0644\u0623\u0646\u0639\u0627\u0645", ayatCount: 165 },
+  { number: 7, name: "Al-A'raf", arabic: "\u0627\u0644\u0623\u0639\u0631\u0627\u0641", ayatCount: 206 },
+  { number: 8, name: "Al-Anfal", arabic: "\u0627\u0644\u0623\u0646\u0641\u0627\u0644", ayatCount: 75 },
+  { number: 9, name: "At-Taubah", arabic: "\u0627\u0644\u062A\u0648\u0628\u0629", ayatCount: 129 },
+  { number: 10, name: "Yunus", arabic: "\u064A\u0648\u0646\u0633", ayatCount: 109 },
+  { number: 11, name: "Hud", arabic: "\u0647\u0648\u062F", ayatCount: 123 },
+  { number: 12, name: "Yusuf", arabic: "\u064A\u0648\u0633\u0641", ayatCount: 111 },
+  { number: 13, name: "Ar-Ra'd", arabic: "\u0627\u0644\u0631\u0639\u062F", ayatCount: 43 },
+  { number: 14, name: "Ibrahim", arabic: "\u0625\u0628\u0631\u0627\u0647\u064A\u0645", ayatCount: 52 },
+  { number: 15, name: "Al-Hijr", arabic: "\u0627\u0644\u062D\u062C\u0631", ayatCount: 99 },
+  { number: 16, name: "An-Nahl", arabic: "\u0627\u0644\u0646\u062D\u0644", ayatCount: 128 },
+  { number: 17, name: "Al-Isra", arabic: "\u0627\u0644\u0625\u0633\u0631\u0627\u0621", ayatCount: 111 },
+  { number: 18, name: "Al-Kahf", arabic: "\u0627\u0644\u0643\u0647\u0641", ayatCount: 110 },
+  { number: 19, name: "Maryam", arabic: "\u0645\u0631\u064A\u0645", ayatCount: 98 },
+  { number: 20, name: "Ta-Ha", arabic: "\u0637\u0647", ayatCount: 135 },
+  { number: 21, name: "Al-Anbiya", arabic: "\u0627\u0644\u0623\u0646\u0628\u064A\u0627\u0621", ayatCount: 112 },
+  { number: 22, name: "Al-Hajj", arabic: "\u0627\u0644\u062D\u062C", ayatCount: 78 },
+  { number: 23, name: "Al-Mu'minun", arabic: "\u0627\u0644\u0645\u0624\u0645\u0646\u0648\u0646", ayatCount: 118 },
+  { number: 24, name: "An-Nur", arabic: "\u0627\u0644\u0646\u0648\u0631", ayatCount: 64 },
+  { number: 25, name: "Al-Furqan", arabic: "\u0627\u0644\u0641\u0631\u0642\u0627\u0646", ayatCount: 77 },
+  { number: 26, name: "Ash-Shu'ara", arabic: "\u0627\u0644\u0634\u0639\u0631\u0627\u0621", ayatCount: 227 },
+  { number: 27, name: "An-Naml", arabic: "\u0627\u0644\u0646\u0645\u0644", ayatCount: 93 },
+  { number: 28, name: "Al-Qasas", arabic: "\u0627\u0644\u0642\u0635\u0635", ayatCount: 88 },
+  { number: 29, name: "Al-Ankabut", arabic: "\u0627\u0644\u0639\u0646\u0643\u0628\u0648\u062A", ayatCount: 69 },
+  { number: 30, name: "Ar-Rum", arabic: "\u0627\u0644\u0631\u0648\u0645", ayatCount: 60 },
+  { number: 31, name: "Luqman", arabic: "\u0644\u0642\u0645\u0627\u0646", ayatCount: 34 },
+  { number: 32, name: "As-Sajdah", arabic: "\u0627\u0644\u0633\u062C\u062F\u0629", ayatCount: 30 },
+  { number: 33, name: "Al-Ahzab", arabic: "\u0627\u0644\u0623\u062D\u0632\u0627\u0628", ayatCount: 73 },
+  { number: 34, name: "Saba", arabic: "\u0633\u0628\u0623", ayatCount: 54 },
+  { number: 35, name: "Fatir", arabic: "\u0641\u0627\u0637\u0631", ayatCount: 45 },
+  { number: 36, name: "Ya Sin", arabic: "\u064A\u0633", ayatCount: 83 },
+  { number: 37, name: "As-Saffat", arabic: "\u0627\u0644\u0635\u0627\u0641\u0627\u062A", ayatCount: 182 },
+  { number: 38, name: "Sad", arabic: "\u0635", ayatCount: 88 },
+  { number: 39, name: "Az-Zumar", arabic: "\u0627\u0644\u0632\u0645\u0631", ayatCount: 75 },
+  { number: 40, name: "Ghafir", arabic: "\u063A\u0627\u0641\u0631", ayatCount: 85 },
+  { number: 41, name: "Fussilat", arabic: "\u0641\u0635\u0644\u062A", ayatCount: 54 },
+  { number: 42, name: "Ash-Shura", arabic: "\u0627\u0644\u0634\u0648\u0631\u0649", ayatCount: 53 },
+  { number: 43, name: "Az-Zukhruf", arabic: "\u0627\u0644\u0632\u062E\u0631\u0641", ayatCount: 89 },
+  { number: 44, name: "Ad-Dukhan", arabic: "\u0627\u0644\u062F\u062E\u0627\u0646", ayatCount: 59 },
+  { number: 45, name: "Al-Jathiyah", arabic: "\u0627\u0644\u062C\u0627\u062B\u064A\u0629", ayatCount: 37 },
+  { number: 46, name: "Al-Ahqaf", arabic: "\u0627\u0644\u0623\u062D\u0642\u0627\u0641", ayatCount: 35 },
+  { number: 47, name: "Muhammad", arabic: "\u0645\u062D\u0645\u062F", ayatCount: 38 },
+  { number: 48, name: "Al-Fath", arabic: "\u0627\u0644\u0641\u062A\u062D", ayatCount: 29 },
+  { number: 49, name: "Al-Hujurat", arabic: "\u0627\u0644\u062D\u062C\u0631\u0627\u062A", ayatCount: 18 },
+  { number: 50, name: "Qaf", arabic: "\u0642", ayatCount: 45 },
+  { number: 51, name: "Adh-Dhariyat", arabic: "\u0627\u0644\u0630\u0627\u0631\u064A\u0627\u062A", ayatCount: 60 },
+  { number: 52, name: "At-Tur", arabic: "\u0627\u0644\u0637\u0648\u0631", ayatCount: 49 },
+  { number: 53, name: "An-Najm", arabic: "\u0627\u0644\u0646\u062C\u0645", ayatCount: 62 },
+  { number: 54, name: "Al-Qamar", arabic: "\u0627\u0644\u0642\u0645\u0631", ayatCount: 55 },
+  { number: 55, name: "Ar-Rahman", arabic: "\u0627\u0644\u0631\u062D\u0645\u0646", ayatCount: 78 },
+  { number: 56, name: "Al-Waqi'ah", arabic: "\u0627\u0644\u0648\u0627\u0642\u0639\u0629", ayatCount: 96 },
+  { number: 57, name: "Al-Hadid", arabic: "\u0627\u0644\u062D\u062F\u064A\u062F", ayatCount: 29 },
+  { number: 58, name: "Al-Mujadilah", arabic: "\u0627\u0644\u0645\u062C\u0627\u062F\u0644\u0629", ayatCount: 22 },
+  { number: 59, name: "Al-Hashr", arabic: "\u0627\u0644\u062D\u0634\u0631", ayatCount: 24 },
+  { number: 60, name: "Al-Mumtahanah", arabic: "\u0627\u0644\u0645\u0645\u062A\u062D\u0646\u0629", ayatCount: 13 },
+  { number: 61, name: "As-Saff", arabic: "\u0627\u0644\u0635\u0641", ayatCount: 14 },
+  { number: 62, name: "Al-Jumu'ah", arabic: "\u0627\u0644\u062C\u0645\u0639\u0629", ayatCount: 11 },
+  { number: 63, name: "Al-Munafiqun", arabic: "\u0627\u0644\u0645\u0646\u0627\u0641\u0642\u0648\u0646", ayatCount: 11 },
+  { number: 64, name: "At-Taghabun", arabic: "\u0627\u0644\u062A\u063A\u0627\u0628\u0646", ayatCount: 18 },
+  { number: 65, name: "At-Talaq", arabic: "\u0627\u0644\u0637\u0644\u0627\u0642", ayatCount: 12 },
+  { number: 66, name: "At-Tahrim", arabic: "\u0627\u0644\u062A\u062D\u0631\u064A\u0645", ayatCount: 12 },
+  { number: 67, name: "Al-Mulk", arabic: "\u0627\u0644\u0645\u0644\u0643", ayatCount: 30 },
+  { number: 68, name: "Al-Qalam", arabic: "\u0627\u0644\u0642\u0644\u0645", ayatCount: 52 },
+  { number: 69, name: "Al-Haqqah", arabic: "\u0627\u0644\u062D\u0627\u0642\u0629", ayatCount: 52 },
+  { number: 70, name: "Al-Ma'arij", arabic: "\u0627\u0644\u0645\u0639\u0627\u0631\u062C", ayatCount: 44 },
+  { number: 71, name: "Nuh", arabic: "\u0646\u0648\u062D", ayatCount: 28 },
+  { number: 72, name: "Al-Jinn", arabic: "\u0627\u0644\u062C\u0646", ayatCount: 28 },
+  { number: 73, name: "Al-Muzzammil", arabic: "\u0627\u0644\u0645\u0632\u0645\u0644", ayatCount: 20 },
+  { number: 74, name: "Al-Muddaththir", arabic: "\u0627\u0644\u0645\u062F\u062B\u0631", ayatCount: 56 },
+  { number: 75, name: "Al-Qiyamah", arabic: "\u0627\u0644\u0642\u064A\u0627\u0645\u0629", ayatCount: 40 },
+  { number: 76, name: "Al-Insan", arabic: "\u0627\u0644\u0625\u0646\u0633\u0627\u0646", ayatCount: 31 },
+  { number: 77, name: "Al-Mursalat", arabic: "\u0627\u0644\u0645\u0631\u0633\u0644\u0627\u062A", ayatCount: 50 },
+  { number: 78, name: "An-Naba", arabic: "\u0627\u0644\u0646\u0628\u0623", ayatCount: 40 },
+  { number: 79, name: "An-Nazi'at", arabic: "\u0627\u0644\u0646\u0627\u0632\u0639\u0627\u062A", ayatCount: 46 },
+  { number: 80, name: "Abasa", arabic: "\u0639\u0628\u0633", ayatCount: 42 },
+  { number: 81, name: "At-Takwir", arabic: "\u0627\u0644\u062A\u0643\u0648\u064A\u0631", ayatCount: 29 },
+  { number: 82, name: "Al-Infitar", arabic: "\u0627\u0644\u0627\u0646\u0641\u0637\u0627\u0631", ayatCount: 19 },
+  { number: 83, name: "Al-Mutaffifin", arabic: "\u0627\u0644\u0645\u0637\u0641\u0641\u064A\u0646", ayatCount: 36 },
+  { number: 84, name: "Al-Inshiqaq", arabic: "\u0627\u0644\u0627\u0646\u0634\u0642\u0627\u0642", ayatCount: 25 },
+  { number: 85, name: "Al-Buruj", arabic: "\u0627\u0644\u0628\u0631\u0648\u062C", ayatCount: 22 },
+  { number: 86, name: "At-Tariq", arabic: "\u0627\u0644\u0637\u0627\u0631\u0642", ayatCount: 17 },
+  { number: 87, name: "Al-A'la", arabic: "\u0627\u0644\u0623\u0639\u0644\u0649", ayatCount: 19 },
+  { number: 88, name: "Al-Ghashiyah", arabic: "\u0627\u0644\u063A\u0627\u0634\u064A\u0629", ayatCount: 26 },
+  { number: 89, name: "Al-Fajr", arabic: "\u0627\u0644\u0641\u062C\u0631", ayatCount: 30 },
+  { number: 90, name: "Al-Balad", arabic: "\u0627\u0644\u0628\u0644\u062F", ayatCount: 20 },
+  { number: 91, name: "Ash-Shams", arabic: "\u0627\u0644\u0634\u0645\u0633", ayatCount: 15 },
+  { number: 92, name: "Al-Lail", arabic: "\u0627\u0644\u0644\u064A\u0644", ayatCount: 21 },
+  { number: 93, name: "Ad-Dhuha", arabic: "\u0627\u0644\u0636\u062D\u0649", ayatCount: 11 },
+  { number: 94, name: "Ash-Sharh", arabic: "\u0627\u0644\u0634\u0631\u062D", ayatCount: 8 },
+  { number: 95, name: "At-Tin", arabic: "\u0627\u0644\u062A\u064A\u0646", ayatCount: 8 },
+  { number: 96, name: "Al-Alaq", arabic: "\u0627\u0644\u0639\u0644\u0642", ayatCount: 19 },
+  { number: 97, name: "Al-Qadr", arabic: "\u0627\u0644\u0642\u062F\u0631", ayatCount: 5 },
+  { number: 98, name: "Al-Bayyinah", arabic: "\u0627\u0644\u0628\u064A\u0646\u0629", ayatCount: 8 },
+  { number: 99, name: "Az-Zalzalah", arabic: "\u0627\u0644\u0632\u0644\u0632\u0644\u0629", ayatCount: 8 },
+  { number: 100, name: "Al-Adiyat", arabic: "\u0627\u0644\u0639\u0627\u062F\u064A\u0627\u062A", ayatCount: 11 },
+  { number: 101, name: "Al-Qari'ah", arabic: "\u0627\u0644\u0642\u0627\u0631\u0639\u0629", ayatCount: 11 },
+  { number: 102, name: "At-Takathur", arabic: "\u0627\u0644\u062A\u0643\u0627\u062B\u0631", ayatCount: 8 },
+  { number: 103, name: "Al-Asr", arabic: "\u0627\u0644\u0639\u0635\u0631", ayatCount: 3 },
+  { number: 104, name: "Al-Humazah", arabic: "\u0627\u0644\u0647\u0645\u0632\u0629", ayatCount: 9 },
+  { number: 105, name: "Al-Fil", arabic: "\u0627\u0644\u0641\u064A\u0644", ayatCount: 5 },
+  { number: 106, name: "Quraysh", arabic: "\u0642\u0631\u064A\u0634", ayatCount: 4 },
+  { number: 107, name: "Al-Ma'un", arabic: "\u0627\u0644\u0645\u0627\u0639\u0648\u0646", ayatCount: 7 },
+  { number: 108, name: "Al-Kawthar", arabic: "\u0627\u0644\u0643\u0648\u062B\u0631", ayatCount: 3 },
+  { number: 109, name: "Al-Kafirun", arabic: "\u0627\u0644\u0643\u0627\u0641\u0631\u0648\u0646", ayatCount: 6 },
+  { number: 110, name: "An-Nasr", arabic: "\u0627\u0644\u0646\u0635\u0631", ayatCount: 3 },
+  { number: 111, name: "Al-Masad", arabic: "\u0627\u0644\u0645\u0633\u062F", ayatCount: 5 },
+  { number: 112, name: "Al-Ikhlas", arabic: "\u0627\u0644\u0625\u062E\u0644\u0627\u0635", ayatCount: 4 },
+  { number: 113, name: "Al-Falaq", arabic: "\u0627\u0644\u0641\u0644\u0642", ayatCount: 5 },
+  { number: 114, name: "An-Nas", arabic: "\u0627\u0644\u0646\u0627\u0633", ayatCount: 6 }
+];
+function getSurah(number) {
+  return SURAH_LIST.find((s) => s.number === number);
+}
+function getAyatCount(surahNumber) {
+  return getSurah(surahNumber)?.ayatCount ?? 0;
+}
+
+// src/labels.ts
+var defaultLabels = {
+  surah: "Surah",
+  ayah: "Ayah",
+  subtitle: "Select surah and ayah",
+  from: "From",
+  to: "To",
+  fromSurah: "Start surah",
+  fromAyah: "Start ayah",
+  toSurah: "End surah",
+  toAyah: "End ayah",
+  select: "Select",
+  cancel: "Cancel"
+};
+function resolveLabels(partial) {
+  return { ...defaultLabels, ...partial };
+}
+
+// src/core/SurahWheelPicker.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function vibrate() {
+  try {
+    if (navigator.vibrate) navigator.vibrate(10);
+  } catch {
+  }
+}
+var visibleCount = 8;
+var itemHeight = 36;
+var halfItemHeight = itemHeight * 0.5;
+var itemAngle = 360 / visibleCount;
+var radius = itemHeight / Math.tan(itemAngle * Math.PI / 180);
+var containerHeight = Math.round(radius * 2 + itemHeight * 0.25);
+var quarterCount = visibleCount >> 2;
+var RESISTANCE = 0.3;
+var STOP_VELOCITY = 0.5;
+var WHEEL_SETTLE_MS = 90;
+var MIN_FLICK_VELOCITY = 2;
+var VIB_THROTTLE_MS = 30;
+var WHEEL_NOTCH_PX = 100;
+var WHEEL_LINE_PX = 40;
+var easeOutCubic = (p) => Math.pow(p - 1, 3) + 1;
+var clamp = (v, min, max) => Math.max(min, Math.min(v, max));
+function SurahWheelPicker({ value, onChange, nameSurah = "surah_number", nameAyat = "ayat", physics, loop = false, chrome = true, ariaSurahLabel, ariaAyatLabel, labels: labelsProp }) {
+  const labels = resolveLabels(labelsProp);
+  const surahLabel = ariaSurahLabel ?? labels.surah;
+  const ayatLabel = ariaAyatLabel ?? labels.ayah;
+  const friction = physics?.friction ?? 5;
+  const maxVelocity = physics?.maxVelocity ?? 120;
+  const snapMs = physics?.snapMs ?? 120;
+  const boundIndex = (norm, len) => liveRef.current.loop ? (norm % len + len) % len : clamp(norm, 0, len - 1);
+  const [surah, setSurah] = (0, import_react.useState)(value?.surah ?? 3);
+  const [ayat, setAyat] = (0, import_react.useState)(value?.ayat ?? 3);
+  const surahScrollRef = (0, import_react.useRef)(0);
+  const ayatScrollRef = (0, import_react.useRef)(0);
+  const surahContainerRef = (0, import_react.useRef)(null);
+  const ayatContainerRef = (0, import_react.useRef)(null);
+  const surahWheelRef = (0, import_react.useRef)(null);
+  const ayatWheelRef = (0, import_react.useRef)(null);
+  const surahHighlightRef = (0, import_react.useRef)(null);
+  const ayatHighlightRef = (0, import_react.useRef)(null);
+  const surahMoveId = (0, import_react.useRef)(0);
+  const ayatMoveId = (0, import_react.useRef)(0);
+  const surahDragging = (0, import_react.useRef)(false);
+  const ayatDragging = (0, import_react.useRef)(false);
+  const motionRef = (0, import_react.useRef)(false);
+  const lastVibRef = (0, import_react.useRef)(0);
+  const wheelTimerSurah = (0, import_react.useRef)(0);
+  const wheelTimerAyat = (0, import_react.useRef)(0);
+  const wheelAccumSurah = (0, import_react.useRef)(0);
+  const wheelAccumAyat = (0, import_react.useRef)(0);
+  const wheelTargetSurah = (0, import_react.useRef)(null);
+  const wheelTargetAyat = (0, import_react.useRef)(null);
+  const activeSurah = SURAH_LIST.find((s) => s.number === surah) ?? SURAH_LIST[2];
+  const ayatCount = getAyatCount(surah);
+  const surahValRef = (0, import_react.useRef)(surah);
+  const ayatValRef = (0, import_react.useRef)(ayat);
+  (0, import_react.useEffect)(() => {
+    surahValRef.current = surah;
+  }, [surah]);
+  (0, import_react.useEffect)(() => {
+    ayatValRef.current = ayat;
+  }, [ayat]);
+  const surahOptions = SURAH_LIST;
+  const ayatOptions = Array.from({ length: ayatCount }, (_, i) => i + 1);
+  const liveRef = (0, import_react.useRef)({ loop, friction, maxVelocity, snapMs, ayatLen: ayatOptions.length });
+  liveRef.current = { loop, friction, maxVelocity, snapMs, ayatLen: ayatOptions.length };
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const ayatLenOf = (isSurah) => isSurah ? surahOptions.length : liveRef.current.ayatLen;
+  (0, import_react.useEffect)(() => {
+    if (ayat > ayatCount || ayat < 1) {
+      setAyat(1);
+      ayatValRef.current = 1;
+      onChange({ surah, ayat: 1 });
+    }
+  }, [surah, ayatCount]);
+  (0, import_react.useEffect)(() => {
+    if (!value) return;
+    if (value.surah === surahValRef.current && value.ayat === ayatValRef.current) return;
+    cancelAll();
+    surahValRef.current = value.surah;
+    ayatValRef.current = value.ayat;
+    setSurah(value.surah);
+    setAyat(value.ayat);
+  }, [value?.surah, value?.ayat]);
+  const scrollTo = (0, import_react.useCallback)((isSurah, scroll) => {
+    const wheelRef = isSurah ? surahWheelRef : ayatWheelRef;
+    const highlightRef = isSurah ? surahHighlightRef : ayatHighlightRef;
+    const len = ayatLenOf(isSurah);
+    if (wheelRef.current) {
+      wheelRef.current.childNodes.forEach((node) => {
+        const li = node;
+        const idx = Number(li.dataset.index);
+        let d = (idx - scroll) % len;
+        d = (d % len + len) % len;
+        if (d > len / 2) d -= len;
+        const cache = li;
+        if (Math.abs(d) > quarterCount) {
+          if (cache._w !== "h") {
+            cache._w = "h";
+            li.style.visibility = "hidden";
+          }
+        } else {
+          const t = `rotateX(${-itemAngle * d}deg) translateZ(${radius}px)`;
+          if (cache._w !== t) {
+            cache._w = t;
+            li.style.visibility = "visible";
+            li.style.transform = t;
+          }
+        }
+      });
+    }
+    if (highlightRef.current) {
+      highlightRef.current.style.transform = `translateY(${-scroll * itemHeight}px)`;
+    }
+    return scroll;
+  }, [surahOptions.length, ayatOptions.length]);
+  const cancelSurah = () => cancelAnimationFrame(surahMoveId.current);
+  const cancelAyat = () => cancelAnimationFrame(ayatMoveId.current);
+  const cancelAll = () => {
+    cancelSurah();
+    cancelAyat();
+    motionRef.current = false;
+  };
+  const animateScroll = (isSurah, start, end, duration, onComplete) => {
+    if (start === end || duration === 0) {
+      scrollTo(isSurah, start);
+      return;
+    }
+    motionRef.current = true;
+    const startTime = performance.now();
+    const dist = end - start;
+    const ref = isSurah ? surahScrollRef : ayatScrollRef;
+    const moveRef = isSurah ? surahMoveId : ayatMoveId;
+    const tick = (now) => {
+      const t = performance.now();
+      const elapsed = (t - startTime) / 1e3;
+      if (elapsed < duration) {
+        const p = easeOutCubic(elapsed / duration);
+        ref.current = scrollTo(isSurah, start + p * dist);
+        moveRef.current = requestAnimationFrame(tick);
+      } else {
+        motionRef.current = false;
+        if (isSurah) cancelSurah();
+        else cancelAyat();
+        ref.current = scrollTo(isSurah, end);
+        onComplete?.();
+      }
+    };
+    requestAnimationFrame(tick);
+  };
+  const selectByScroll = (isSurah, scroll) => {
+    const len = ayatLenOf(isSurah);
+    const norm = Math.round(scroll);
+    const bounded = boundIndex(norm, len);
+    if (isSurah) {
+      surahScrollRef.current = scrollTo(true, bounded);
+      const sel = surahOptions[surahScrollRef.current];
+      if (sel) {
+        const n = sel.number;
+        if (n !== surahValRef.current) {
+          vibrate();
+          surahValRef.current = n;
+          ayatValRef.current = 1;
+          setSurah(n);
+          setAyat(1);
+          onChangeRef.current({ surah: n, ayat: 1 });
+        }
+      }
+    } else {
+      ayatScrollRef.current = scrollTo(false, bounded);
+      const n = bounded + 1;
+      if (n !== ayatValRef.current) {
+        vibrate();
+        ayatValRef.current = n;
+        setAyat(n);
+        onChangeRef.current({ surah: surahValRef.current, ayat: n });
+      }
+    }
+  };
+  const throttledVibrate = () => {
+    const now = performance.now();
+    if (now - lastVibRef.current > VIB_THROTTLE_MS) {
+      lastVibRef.current = now;
+      vibrate();
+    }
+  };
+  const calcVelocity = (yList) => {
+    if (yList.length < 2) return 0;
+    const clampV = (v) => clamp(v, -liveRef.current.maxVelocity, liveRef.current.maxVelocity);
+    const last = yList[yList.length - 1];
+    const pts = yList.filter(([_, t]) => last[1] - t <= 120);
+    if (pts.length < 2) {
+      const [sy, st] = yList[yList.length - 2];
+      const [ey, et] = last;
+      const dt = (et - st) / 1e3;
+      if (dt <= 0) return 0;
+      return clampV((sy - ey) / itemHeight / dt);
+    }
+    const n = pts.length;
+    const t0 = pts[0][1] / 1e3;
+    let sx = 0, sy2 = 0, sxx = 0, sxy = 0;
+    for (const [y, t] of pts) {
+      const x = t / 1e3 - t0;
+      sx += x;
+      sy2 += y;
+      sxx += x * x;
+      sxy += x * y;
+    }
+    const denom = n * sxx - sx * sx;
+    if (denom === 0) return 0;
+    const slope = (n * sxy - sx * sy2) / denom;
+    return clampV(-slope / itemHeight);
+  };
+  const commitNotch = (isSurah, notch) => {
+    const len = ayatLenOf(isSurah);
+    const bounded = boundIndex(notch, len);
+    if (isSurah) {
+      const sel = surahOptions[bounded];
+      if (sel && sel.number !== surahValRef.current) {
+        surahValRef.current = sel.number;
+        ayatValRef.current = 1;
+        setSurah(sel.number);
+        setAyat(1);
+        onChangeRef.current({ surah: sel.number, ayat: 1 });
+      }
+    } else {
+      const n = bounded + 1;
+      if (n !== ayatValRef.current) {
+        ayatValRef.current = n;
+        setAyat(n);
+        onChangeRef.current({ surah: surahValRef.current, ayat: n });
+      }
+    }
+  };
+  const fling = (isSurah, velocity) => {
+    const scrollRef = isSurah ? surahScrollRef : ayatScrollRef;
+    const moveRef = isSurah ? surahMoveId : ayatMoveId;
+    const len = ayatLenOf(isSurah);
+    const { friction: friction2, snapMs: snapMs2, loop: loop2 } = liveRef.current;
+    let v = velocity;
+    let last = performance.now();
+    let lastNotch = Math.round(scrollRef.current);
+    motionRef.current = true;
+    const step = (_rafNow) => {
+      const now = performance.now();
+      const dt = clamp((now - last) / 1e3, 0, 0.05);
+      last = now;
+      v *= Math.exp(-friction2 * dt);
+      if (Math.abs(v) < STOP_VELOCITY) {
+        const target = loop2 ? Math.round(scrollRef.current) : clamp(Math.round(scrollRef.current), 0, len - 1);
+        animateScroll(isSurah, scrollRef.current, target, snapMs2 / 1e3, () => selectByScroll(isSurah, target));
+        return;
+      }
+      let next = scrollRef.current + v * dt;
+      if (!loop2 && (next < 0 || next > len - 1)) {
+        next = clamp(next, 0, len - 1);
+        v = 0;
+      }
+      scrollRef.current = scrollTo(isSurah, next);
+      const notch = Math.round(scrollRef.current);
+      if (notch !== lastNotch) {
+        lastNotch = notch;
+        throttledVibrate();
+        commitNotch(isSurah, notch);
+      }
+      moveRef.current = requestAnimationFrame(step);
+    };
+    moveRef.current = requestAnimationFrame(step);
+  };
+  const scrollByStep = (isSurah, step) => {
+    const ref = isSurah ? surahScrollRef : ayatScrollRef;
+    const start = ref.current;
+    const len = ayatLenOf(isSurah);
+    let end = Math.round(start + step);
+    if (!liveRef.current.loop) end = clamp(end, 0, len - 1);
+    const dist = Math.abs(end - start);
+    if (dist === 0) return;
+    const duration = Math.sqrt(dist / 5);
+    cancelAll();
+    animateScroll(isSurah, start, end, duration, () => selectByScroll(isSurah, ref.current));
+  };
+  (0, import_react.useEffect)(() => {
+    const si = surahOptions.findIndex((s) => s.number === surah);
+    const ai = ayat - 1;
+    surahScrollRef.current = scrollTo(true, si);
+    ayatScrollRef.current = scrollTo(false, ai);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (motionRef.current || surahDragging.current) return;
+    const si = surahOptions.findIndex((s) => s.number === surah);
+    if (si !== -1) {
+      surahScrollRef.current = scrollTo(true, si);
+    }
+  }, [surah, scrollTo, surahOptions]);
+  (0, import_react.useEffect)(() => {
+    if (motionRef.current || ayatDragging.current) return;
+    ayatScrollRef.current = scrollTo(false, ayat - 1);
+  }, [ayat, ayatCount, scrollTo]);
+  const makeDrag = (isSurah) => {
+    const containerRef = isSurah ? surahContainerRef : ayatContainerRef;
+    const draggingRef = isSurah ? surahDragging : ayatDragging;
+    const scrollRef = isSurah ? surahScrollRef : ayatScrollRef;
+    const wheelTimerRef = isSurah ? wheelTimerSurah : wheelTimerAyat;
+    const yList = [];
+    let startY = 0;
+    let touchScroll = 0;
+    let isClick = true;
+    let lastTick = 0;
+    const onDown = (e) => {
+      draggingRef.current = true;
+      const y = (e instanceof MouseEvent ? e.clientY : e.touches?.[0]?.clientY) || 0;
+      startY = y;
+      yList.length = 0;
+      yList.push([y, Date.now()]);
+      touchScroll = scrollRef.current;
+      lastTick = Math.round(touchScroll);
+      isClick = true;
+      window.clearTimeout(wheelTimerRef.current);
+      cancelAll();
+    };
+    const onMove = (e) => {
+      if (!draggingRef.current) return;
+      if (e.cancelable) e.preventDefault();
+      const y = (e instanceof MouseEvent ? e.clientY : e.touches?.[0]?.clientY) || 0;
+      if (isClick && Math.abs(y - startY) > 5) isClick = false;
+      yList.push([y, Date.now()]);
+      if (yList.length > 5) yList.shift();
+      const delta = (startY - y) / itemHeight;
+      let next = touchScroll + delta;
+      const len = ayatLenOf(isSurah);
+      if (!liveRef.current.loop) {
+        if (next < 0) next *= RESISTANCE;
+        else if (next > len - 1) next = len - 1 + (next - (len - 1)) * RESISTANCE;
+      }
+      scrollRef.current = scrollTo(isSurah, next);
+      const notch = Math.round(scrollRef.current);
+      if (notch !== lastTick) {
+        lastTick = notch;
+        throttledVibrate();
+        commitNotch(isSurah, notch);
+      }
+    };
+    const onUp = (e) => {
+      if (!draggingRef.current) return;
+      draggingRef.current = false;
+      if (isClick) {
+        const y = (e instanceof MouseEvent ? e.clientY : e.changedTouches?.[0]?.clientY) || 0;
+        const container = containerRef.current;
+        if (container) {
+          const top = container.getBoundingClientRect().top;
+          const clickY = y - top;
+          const quarter = visibleCount >> 2;
+          let pos = 0;
+          const degToRad = Math.PI / 180;
+          for (let i = quarter - 1; i >= -quarter + 1; --i) {
+            const segLen = itemHeight * Math.cos(i * itemAngle * degToRad);
+            const start = pos;
+            pos += segLen;
+            if (clickY >= start && clickY <= pos) {
+              const steps = (quarter - i - 1) * -1;
+              if (steps !== 0) scrollByStep(isSurah, steps);
+              return;
+            }
+          }
+        }
+        return;
+      }
+      cancelAll();
+      const live = liveRef.current;
+      const len = ayatLenOf(isSurah);
+      if (!live.loop && (scrollRef.current < 0 || scrollRef.current > len - 1)) {
+        const t = clamp(scrollRef.current, 0, len - 1);
+        animateScroll(isSurah, scrollRef.current, t, live.snapMs / 1e3, () => selectByScroll(isSurah, t));
+        return;
+      }
+      const velocity = calcVelocity(yList);
+      if (Math.abs(velocity) < MIN_FLICK_VELOCITY) {
+        const t = live.loop ? Math.round(scrollRef.current) : clamp(Math.round(scrollRef.current), 0, len - 1);
+        animateScroll(isSurah, scrollRef.current, t, live.snapMs / 1e3, () => selectByScroll(isSurah, t));
+        return;
+      }
+      fling(isSurah, velocity);
+    };
+    return { onDown, onMove, onUp };
+  };
+  const surahDrag = (0, import_react.useRef)(null);
+  const ayatDrag = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const sDrag = makeDrag(true);
+    const aDrag = makeDrag(false);
+    surahDrag.current = sDrag;
+    ayatDrag.current = aDrag;
+    const sEl = surahContainerRef.current;
+    const aEl = ayatContainerRef.current;
+    if (sEl) {
+      sEl.addEventListener("touchstart", sDrag.onDown, { passive: false });
+      sEl.addEventListener("touchmove", sDrag.onMove, { passive: false });
+      sEl.addEventListener("touchend", sDrag.onUp);
+      sEl.addEventListener("mousedown", sDrag.onDown);
+      document.addEventListener("mousemove", sDrag.onMove);
+      document.addEventListener("mouseup", sDrag.onUp);
+    }
+    if (aEl) {
+      aEl.addEventListener("touchstart", aDrag.onDown, { passive: false });
+      aEl.addEventListener("touchmove", aDrag.onMove, { passive: false });
+      aEl.addEventListener("touchend", aDrag.onUp);
+      aEl.addEventListener("mousedown", aDrag.onDown);
+      document.addEventListener("mousemove", aDrag.onMove);
+      document.addEventListener("mouseup", aDrag.onUp);
+    }
+    const onWheel = (e, isSurah) => {
+      if (e.cancelable) e.preventDefault();
+      cancelAll();
+      motionRef.current = true;
+      const timerRef = isSurah ? wheelTimerSurah : wheelTimerAyat;
+      const accRef = isSurah ? wheelAccumSurah : wheelAccumAyat;
+      const targetRef = isSurah ? wheelTargetSurah : wheelTargetAyat;
+      window.clearTimeout(timerRef.current);
+      const ref = isSurah ? surahScrollRef : ayatScrollRef;
+      const live = liveRef.current;
+      const len = ayatLenOf(isSurah);
+      let target = targetRef.current ?? Math.round(ref.current);
+      const unit = e.deltaMode === 1 ? WHEEL_LINE_PX : e.deltaMode === 2 ? 400 : 1;
+      accRef.current += e.deltaY * unit / WHEEL_NOTCH_PX;
+      let guard = 0;
+      while (Math.abs(accRef.current) >= 1 && guard++ < 8) {
+        const dir = Math.sign(accRef.current);
+        const t = target + dir;
+        if (!live.loop && (t < 0 || t > len - 1)) {
+          accRef.current = 0;
+          break;
+        }
+        accRef.current -= dir;
+        target = t;
+        throttledVibrate();
+        commitNotch(isSurah, t);
+      }
+      targetRef.current = target;
+      animateScroll(isSurah, ref.current, target, live.snapMs / 1e3, void 0);
+      timerRef.current = window.setTimeout(() => {
+        targetRef.current = null;
+        const t = live.loop ? Math.round(ref.current) : clamp(Math.round(ref.current), 0, len - 1);
+        animateScroll(isSurah, ref.current, t, live.snapMs / 1e3, () => selectByScroll(isSurah, t));
+      }, WHEEL_SETTLE_MS);
+    };
+    const sWheel = (e) => onWheel(e, true);
+    const aWheel = (e) => onWheel(e, false);
+    sEl?.addEventListener("wheel", sWheel, { passive: false });
+    aEl?.addEventListener("wheel", aWheel, { passive: false });
+    return () => {
+      window.clearTimeout(wheelTimerSurah.current);
+      window.clearTimeout(wheelTimerAyat.current);
+      cancelAll();
+      sEl?.removeEventListener("touchstart", sDrag.onDown);
+      sEl?.removeEventListener("touchmove", sDrag.onMove);
+      sEl?.removeEventListener("touchend", sDrag.onUp);
+      sEl?.removeEventListener("mousedown", sDrag.onDown);
+      document.removeEventListener("mousemove", sDrag.onMove);
+      document.removeEventListener("mouseup", sDrag.onUp);
+      aEl?.removeEventListener("touchstart", aDrag.onDown);
+      aEl?.removeEventListener("touchmove", aDrag.onMove);
+      aEl?.removeEventListener("touchend", aDrag.onUp);
+      aEl?.removeEventListener("mousedown", aDrag.onDown);
+      document.removeEventListener("mousemove", aDrag.onMove);
+      document.removeEventListener("mouseup", aDrag.onUp);
+      sEl?.removeEventListener("wheel", sWheel);
+      aEl?.removeEventListener("wheel", aWheel);
+    };
+  }, []);
+  const onKeySurah = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      scrollByStep(true, 1);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      scrollByStep(true, -1);
+    }
+  };
+  const onKeyAyat = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      scrollByStep(false, 1);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      scrollByStep(false, -1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: chrome ? "rounded-[20px] bg-surface border border-border p-4" : "", children: [
+    chrome ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[18px] font-bold leading-none tracking-tight text-foreground", children: labels.surah }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted mt-1", children: labels.subtitle })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl px-4 py-2.5 text-[13px] font-medium min-w-[170px] text-center border-2 border-accent text-foreground w-full sm:w-auto", children: [
+          pad2(surah),
+          " ",
+          activeSurah.name,
+          " : ",
+          ayat
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: nameSurah, value: String(surah) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: nameAyat, value: String(ayat) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex gap-2 rounded-2xl bg-accent/5 border border-border p-2 overflow-hidden", style: { perspective: "2000px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: surahContainerRef,
+          tabIndex: 0,
+          role: "listbox",
+          "aria-label": surahLabel,
+          onKeyDown: onKeySurah,
+          className: "flex-1 min-w-0 relative overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-xl",
+          style: { height: containerHeight, maskImage: "linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "ul",
+              {
+                ref: surahWheelRef,
+                className: "absolute top-1/2 left-0 w-full h-0 m-0 p-0 list-none",
+                style: { transformStyle: "preserve-3d", willChange: "transform", backfaceVisibility: "hidden" },
+                children: SURAH_LIST.map((s, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "li",
+                  {
+                    "data-index": idx,
+                    className: "absolute top-0 left-0 w-full flex items-center px-3 cursor-pointer select-none text-[13px]",
+                    style: {
+                      top: -halfItemHeight,
+                      height: itemHeight,
+                      lineHeight: `${itemHeight}px`,
+                      visibility: "hidden"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: s.number === surah ? "text-foreground font-bold" : "text-muted", children: [
+                      pad2(s.number),
+                      " ",
+                      s.name
+                    ] })
+                  },
+                  s.number
+                ))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute top-1/2 inset-x-2 -translate-y-1/2 h-9 rounded-xl border-2 border-accent z-10" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: ayatContainerRef,
+          tabIndex: 0,
+          role: "listbox",
+          "aria-label": ayatLabel,
+          onKeyDown: onKeyAyat,
+          className: "flex-1 min-w-0 sm:flex-none sm:w-[88px] relative overflow-hidden shrink-0 border-l border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-xl",
+          style: { height: containerHeight, maskImage: "linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "ul",
+              {
+                ref: ayatWheelRef,
+                className: "absolute top-1/2 left-0 w-full h-0 m-0 p-0 list-none",
+                style: { transformStyle: "preserve-3d", willChange: "transform", backfaceVisibility: "hidden" },
+                children: ayatOptions.map((n, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "li",
+                  {
+                    "data-index": idx,
+                    className: "absolute top-0 left-0 w-full flex items-center justify-center cursor-pointer select-none text-[13px]",
+                    style: {
+                      top: -halfItemHeight,
+                      height: itemHeight,
+                      lineHeight: `${itemHeight}px`,
+                      visibility: "hidden"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: n === ayat ? "text-foreground font-bold" : "text-muted", children: n })
+                  },
+                  n
+                ))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute top-1/2 inset-x-2 -translate-y-1/2 h-9 rounded-xl border-2 border-accent z-10" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sr-only", "aria-hidden": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ref: surahHighlightRef }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ref: ayatHighlightRef })
+    ] })
+  ] });
+}
+
+// src/core/SurahRangePicker.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_RANGE = {
+  from: { surah: 1, ayat: 1 },
+  to: { surah: 2, ayat: 5 }
+};
+var cmpPos = (a, b) => a.surah !== b.surah ? a.surah - b.surah : a.ayat - b.ayat;
+function SurahRangePicker({
+  value,
+  labels: labelsProp,
+  onChange,
+  physics,
+  loop = false,
+  nameFromSurah = "from_surah_number",
+  nameFromAyat = "from_ayat",
+  nameToSurah = "to_surah_number",
+  nameToAyat = "to_ayat"
+}) {
+  const labels = resolveLabels(labelsProp);
+  const [from, setFrom] = (0, import_react2.useState)(value?.from ?? DEFAULT_RANGE.from);
+  const [to, setTo] = (0, import_react2.useState)(value?.to ?? DEFAULT_RANGE.to);
+  const emit = (next) => {
+    setFrom(next.from);
+    setTo(next.to);
+    onChange(next);
+  };
+  const handleFrom = (f) => {
+    emit({ from: f, to: cmpPos(f, to) > 0 ? f : to });
+  };
+  const handleTo = (next) => {
+    emit({ from: cmpPos(from, next) > 0 ? next : from, to: next });
+  };
+  const nameOf = (n) => getSurah(n)?.name ?? String(n);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rounded-[20px] bg-surface border border-border p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-[18px] font-bold leading-none tracking-tight text-foreground", children: labels.surah }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-muted mt-1", children: labels.subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rounded-xl px-4 py-2.5 text-[13px] font-medium min-w-[170px] text-center border-2 border-accent text-foreground w-full sm:w-auto", children: [
+        nameOf(from.surah),
+        ":",
+        from.ayat,
+        " - ",
+        nameOf(to.surah),
+        ":",
+        to.ayat
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: nameFromSurah, value: String(from.surah) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: nameFromAyat, value: String(from.ayat) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: nameToSurah, value: String(to.surah) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "hidden", name: nameToAyat, value: String(to.ayat) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: labels.from }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          SurahWheelPicker,
+          {
+            value: from,
+            onChange: handleFrom,
+            physics,
+            loop,
+            chrome: false,
+            ariaSurahLabel: labels.fromSurah,
+            ariaAyatLabel: labels.fromAyah
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: labels.to }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          SurahWheelPicker,
+          {
+            value: to,
+            onChange: handleTo,
+            physics,
+            loop,
+            chrome: false,
+            ariaSurahLabel: labels.toSurah,
+            ariaAyatLabel: labels.toAyah
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/core/SurahFieldPicker.tsx
+var import_react4 = require("react");
+
+// src/ui/Popup.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var useIsoLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
+var GAP = 8;
+function clamp2(v, min, max) {
+  return Math.max(min, Math.min(v, max));
+}
+function place(anchor, popW, popH, placement) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (placement === "right") {
+    let x2 = anchor.right + GAP;
+    if (x2 + popW > vw) x2 = anchor.left - popW - GAP;
+    const y2 = clamp2(
+      anchor.top + anchor.height / 2 - popH / 2,
+      GAP,
+      Math.max(GAP, vh - popH - GAP)
+    );
+    return { x: Math.max(GAP, x2), y: y2 };
+  }
+  let y = anchor.bottom + GAP;
+  if (y + popH > vh) y = anchor.top - popH - GAP;
+  const x = clamp2(anchor.left, GAP, Math.max(GAP, vw - popW - GAP));
+  return { x, y: Math.max(GAP, y) };
+}
+function Popup({
+  open,
+  onClose,
+  anchorRef,
+  placement = "bottom",
+  label,
+  className,
+  children
+}) {
+  const popRef = (0, import_react3.useRef)(null);
+  const [pos, setPos] = (0, import_react3.useState)(null);
+  useIsoLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const anchor = anchorRef.current;
+    const pop = popRef.current;
+    if (!anchor || !pop || typeof window === "undefined") return;
+    const doPlace = () => {
+      const el = popRef.current;
+      const a = anchorRef.current;
+      if (!el || !a) return;
+      setPos(place(a.getBoundingClientRect(), el.offsetWidth, el.offsetHeight, placement));
+    };
+    doPlace();
+    window.addEventListener("resize", doPlace);
+    window.addEventListener("scroll", doPlace, true);
+    return () => {
+      window.removeEventListener("resize", doPlace);
+      window.removeEventListener("scroll", doPlace, true);
+    };
+  }, [open, anchorRef, placement, children]);
+  (0, import_react3.useEffect)(() => {
+    if (!open || typeof document === "undefined") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onPointer = (e) => {
+      const t = e.target;
+      if (popRef.current?.contains(t)) return;
+      if (anchorRef.current?.contains(t)) return;
+      onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open, onClose, anchorRef]);
+  (0, import_react3.useEffect)(() => {
+    if (!open && typeof document !== "undefined") {
+      const active = document.activeElement;
+      if (active && popRef.current?.contains(active)) {
+        anchorRef.current?.focus();
+      }
+    }
+  }, [open, anchorRef]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref: popRef,
+        role: "dialog",
+        "aria-label": label,
+        "aria-modal": "false",
+        className: `sp-popup ${className ?? ""}`,
+        style: pos ? { left: pos.x, top: pos.y, visibility: "visible" } : { left: 0, top: 0, visibility: "hidden" },
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// src/icons/icons.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function BookIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })
+      ]
+    }
+  );
+}
+
+// src/core/SurahFieldPicker.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SurahFieldPicker({
+  value,
+  onChange,
+  physics,
+  loop = false,
+  placeholder,
+  className,
+  popoverClassName,
+  icon,
+  placement = "right",
+  labels: labelsProp,
+  nameSurah = "surah_number",
+  nameAyat = "ayat"
+}) {
+  const labels = resolveLabels(labelsProp);
+  const [committed, setCommitted] = (0, import_react4.useState)(value ?? { surah: 3, ayat: 3 });
+  const [draft, setDraft] = (0, import_react4.useState)(committed);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const fieldRef = (0, import_react4.useRef)(null);
+  const current = value ?? committed;
+  const text = placeholder && !value ? placeholder : `${getSurah(current.surah)?.name ?? current.surah}:${current.ayat}`;
+  const handleOpenChange = (next) => {
+    if (next) setDraft(current);
+    setOpen(next);
+  };
+  const handleSelect = () => {
+    setCommitted(draft);
+    onChange(draft);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name: nameSurah, value: String(current.surah) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name: nameAyat, value: String(current.ayat) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        ref: fieldRef,
+        type: "button",
+        onClick: () => handleOpenChange(!open),
+        className: `flex w-full items-center justify-between gap-2 rounded-xl border border-divider bg-background px-3 py-2.5 text-sm text-foreground ${className ?? ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: text }),
+          icon ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BookIcon, { className: "w-4 h-4 shrink-0 text-muted" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Popup,
+      {
+        open,
+        onClose: () => setOpen(false),
+        anchorRef: fieldRef,
+        placement,
+        label: labels.surah,
+        className: popoverClassName,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-[320px] max-w-[calc(100vw-2rem)] p-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            SurahWheelPicker,
+            {
+              value: draft,
+              onChange: setDraft,
+              physics,
+              loop,
+              chrome: false,
+              labels: labelsProp,
+              nameSurah,
+              nameAyat
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-3 flex justify-end gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "sp-btn sp-btn-ghost", onClick: () => setOpen(false), children: labels.cancel }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "sp-btn sp-btn-primary", onClick: handleSelect, children: labels.select })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BookIcon,
+  ChevronDownIcon,
+  Popup,
+  SURAH_LIST,
+  SurahFieldPicker,
+  SurahRangePicker,
+  SurahWheelPicker,
+  defaultLabels,
+  getAyatCount,
+  getSurah,
+  resolveLabels
+});
+//# sourceMappingURL=index.cjs.map