From 75c2583c41b8b69f6444162b9d410489653d788d Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Thu, 9 Apr 2026 12:34:49 +0530
Subject: [PATCH 01/13] multi segment first flow and lint fix

---
 .../sprint-33-WeBuddhist-Studio.md            |   8 +-
 package-lock.json                             |  31 +++
 package.json                                  |   1 +
 .../routes/task/components/view/TaskForm.tsx  |  18 +-
 src/components/ui/atoms/checkbox.tsx          |  30 +++
 .../content-sub/ContentComponents.tsx         |  28 ++-
 .../ui/molecules/subtask-card/SubTaskCard.tsx |   5 +-
 .../webuddhist-source/SourceSelectorSheet.tsx | 194 +++++++++++++++++-
 src/components/ui/shadimport.ts               |   2 +
 9 files changed, 294 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ui/atoms/checkbox.tsx

diff --git a/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md b/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md
index 95befa7b..00a63714 100644
--- a/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md
+++ b/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md
@@ -8,18 +8,18 @@
 
 This sprint delivered **2** item(s) in **OpenPecha/WeBuddhist-Studio**.
 
-
 ## ✨ New Features
 
-* **STUDIO: Remove language param for search**: dont send language when performing multilingual search. due to this text were not showing
+- **STUDIO: Remove language param for search**: dont send language when performing multilingual search. due to this text were not showing
 
 <img width="1919" height="869" alt="Image" src="https://github.com/user-attachments/assets/a41a92dd-9f4e-4f95
 
 ## 🐛 Bug Fixes
 
-* **STUDIO: make tag case sensitive and trim it**: if we type Anger it goes as Anger , if we type anger it goes as anger. if we type space Anger space , the space is taken along with it. 
+- **STUDIO: make tag case sensitive and trim it**: if we type Anger it goes as Anger , if we type anger it goes as anger. if we type space Anger space , the space is taken along with it.
 
 now three tag with same meaning are created. so before putting
 
 ---
-*Generated from GitHub Project Board - Iteration 33*
+
+_Generated from GitHub Project Board - Iteration 33_
diff --git a/package-lock.json b/package-lock.json
index 8ae32d6b..98e1bf91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@hookform/resolvers": "^5.2.1",
         "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
@@ -1477,6 +1478,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
diff --git a/package.json b/package.json
index a901813f..515f4755 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
diff --git a/src/components/routes/task/components/view/TaskForm.tsx b/src/components/routes/task/components/view/TaskForm.tsx
index 6ecb94d6..cb142473 100644
--- a/src/components/routes/task/components/view/TaskForm.tsx
+++ b/src/components/routes/task/components/view/TaskForm.tsx
@@ -159,38 +159,42 @@ const TaskForm = ({
   useEffect(() => {
     if (editingTask && taskDetails) {
       form.setValue("title", editingTask.title);
-      const subTasksData = taskDetails.subtasks.map((data: any) => {
+      const sorted = [...taskDetails.subtasks].sort(
+        (a: { display_order: number }, b: { display_order: number }) =>
+          a.display_order - b.display_order,
+      );
+      const subTasksData: SubTask[] = sorted.map((data: any) => {
         switch (data.content_type) {
           case "VIDEO":
             return {
               id: data.id,
-              content_type: "VIDEO",
+              content_type: "VIDEO" as const,
               content: data.content,
               duration: data.duration,
             };
           case "TEXT":
             return {
               id: data.id,
-              content_type: "TEXT",
+              content_type: "TEXT" as const,
               content: data.content,
             };
           case "AUDIO":
             return {
               id: data.id,
-              content_type: "AUDIO",
+              content_type: "AUDIO" as const,
               content: data.content,
             };
           case "IMAGE":
             return {
               id: data.id,
-              content_type: "IMAGE",
+              content_type: "IMAGE" as const,
               imagePreview: data.content,
               content: data.image_url,
             };
           case "SOURCE_REFERENCE":
             return {
               id: data.id,
-              content_type: "SOURCE_REFERENCE",
+              content_type: "SOURCE_REFERENCE" as const,
               content: data.content,
               source_text_id: data.source_text_id || null,
               pecha_segment_id: data.pecha_segment_id || null,
@@ -199,7 +203,7 @@ const TaskForm = ({
           default:
             return {
               id: data.id,
-              content_type: "TEXT",
+              content_type: "TEXT" as const,
               content: data.content,
             };
         }
diff --git a/src/components/ui/atoms/checkbox.tsx b/src/components/ui/atoms/checkbox.tsx
new file mode 100644
index 00000000..7d5f62b3
--- /dev/null
+++ b/src/components/ui/atoms/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { FaCheck } from "react-icons/fa6";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-transparent data-[state=checked]:text-primary dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <FaCheck className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/molecules/content-sub/ContentComponents.tsx b/src/components/ui/molecules/content-sub/ContentComponents.tsx
index 2aa45b78..0667d988 100644
--- a/src/components/ui/molecules/content-sub/ContentComponents.tsx
+++ b/src/components/ui/molecules/content-sub/ContentComponents.tsx
@@ -60,10 +60,16 @@ export const AudioContent = ({ content }: { content: string }) => {
 
   const src = getEmbedSrc();
   if (!src) return null;
+
+  const audioTitle = content.includes("spotify.com")
+    ? "Spotify audio player"
+    : "SoundCloud audio player";
+
   return (
     <div className="mt-4 w-full rounded-md overflow-hidden bg-[#FAFAFA] dark:bg-sidebar-secondary ">
       <iframe
         src={src}
+        title={audioTitle}
         allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
         allowFullScreen
         loading="lazy"
@@ -91,8 +97,20 @@ export const TextContent = ({ content }: { content: string }) => (
   </div>
 );
 
-export const SourceReferenceContent = ({ content }: { content: string }) => (
-  <div className="w-full min-h-12 bg-[#FAFAFA] dark:bg-sidebar-secondary whitespace-pre-wrap text-base p-3 border rounded-md border-dashed border-gray-300 dark:border-[#313132]">
-    <div dangerouslySetInnerHTML={{ __html: content }} />
-  </div>
-);
+export const SourceReferenceContent = ({ content }: { content: string }) => {
+  const segments = content.split("\n").filter(Boolean);
+
+  return (
+    <div className="space-y-3">
+      {segments.map((text, index) => (
+        <div
+          key={index}
+          className="w-full min-h-12 bg-[#FAFAFA] dark:bg-sidebar-secondary whitespace-pre-wrap text-base p-3 border rounded-md border-dashed border-gray-300 dark:border-[#313132]"
+        >
+          <span className="font-medium">{index + 1}. </span>
+          <span dangerouslySetInnerHTML={{ __html: text }} />
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
index f88e4749..9b32f4c2 100644
--- a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
+++ b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
@@ -6,6 +6,7 @@ import {
   VideoContent,
   AudioContent,
   ContentIcon,
+  SourceReferenceContent,
 } from "../content-sub/ContentComponents";
 import { getYouTubeDuration } from "@/lib/utils";
 
@@ -183,9 +184,7 @@ const ImageSubtask = ({
 );
 
 const SourceSubtask = ({ subTask }: { subTask: SourceSubTask }) => (
-  <div className="w-full min-h-12 bg-[#FAFAFA] dark:bg-sidebar-secondary whitespace-pre-wrap text-base p-3 border rounded-md border-dashed border-gray-300 dark:border-[#313132]">
-    <div dangerouslySetInnerHTML={{ __html: subTask.content }} />
-  </div>
+  <SourceReferenceContent content={subTask.content} />
 );
 
 export const SubTaskCard = ({
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index d75d9248..0d6b255b 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -22,6 +22,122 @@ interface SourceSelectorSheetProps {
   onAddSource: (sourceData: SourceData) => void;
 }
 
+const parseRange = (
+  input: string,
+  max: number,
+): { start: number; end: number } | null => {
+  const match = input.trim().match(/^(\d+)\s*-\s*(\d+)$/);
+  if (!match) return null;
+  const start = parseInt(match[1], 10);
+  const end = parseInt(match[2], 10);
+  if (start < 1 || end < start || start > max) return null;
+  return { start, end: Math.min(end, max) };
+};
+
+const SelectedSourceDetail = ({
+  segments,
+  selectedSource,
+  onAdd,
+}: {
+  segments: any[];
+  selectedSource: any;
+  onAdd: (sourceData: SourceData) => void;
+}) => {
+  const [rangeInput, setRangeInput] = useState("");
+  const [selectAll, setSelectAll] = useState(false);
+
+  const segmentCount = segments.length;
+
+  const parsedRange = useMemo(() => {
+    if (!segmentCount) return null;
+    return parseRange(rangeInput, segmentCount);
+  }, [rangeInput, segmentCount]);
+
+  const isAddDisabled = !parsedRange;
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAll(checked);
+    if (checked && segmentCount > 0) {
+      setRangeInput(`1-${segmentCount}`);
+    } else {
+      setRangeInput("");
+    }
+  };
+
+  const handleAdd = () => {
+    if (!parsedRange || !selectedSource) return;
+    const { start, end } = parsedRange;
+    const selected = segments.slice(start - 1, end);
+    const content = selected.map((seg: any) => seg.content).join("\n");
+    const segmentIds = selected.map((seg: any) => seg.segment_id);
+    const pechaSegmentId = selected[0]?.pecha_segment_id || "";
+
+    onAdd({
+      content,
+      pecha_segment_id: pechaSegmentId,
+      text_id: selectedSource.text.text_id,
+      segment_ids: segmentIds,
+    });
+  };
+
+  return (
+    <div className="mt-3 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-gray-600 dark:text-[#b1b1b1]">
+          Select Range (e.g. 1-{segmentCount})
+        </span>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <span className="text-sm text-gray-600 dark:text-[#b1b1b1]">
+            Select All
+          </span>
+          <Pecha.Checkbox
+            checked={selectAll}
+            onCheckedChange={(checked: boolean) => handleSelectAll(!!checked)}
+            className="data-[state=checked]:bg-transparent dark:data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
+          />
+        </label>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Pecha.Input
+          placeholder={`1-${segmentCount}`}
+          value={rangeInput}
+          onChange={(e) => {
+            setRangeInput(e.target.value);
+            setSelectAll(false);
+          }}
+          className="flex-1 h-10"
+        />
+        <Pecha.Button
+          type="button"
+          variant="destructive"
+          disabled={isAddDisabled}
+          onClick={handleAdd}
+          className="h-10 px-6 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Add
+        </Pecha.Button>
+      </div>
+
+      <div className="space-y-3 max-h-[300px] overflow-y-auto">
+        {segments.map((segment: any, segIndex: number) => (
+          <div
+            key={segment.segment_id || segIndex}
+            className="border p-3 rounded-md border-dashed border-gray-300 dark:border-[#313132] text-sm"
+          >
+            <span className="font-medium">{segIndex + 1}. </span>
+            <span
+              dangerouslySetInnerHTML={{
+                __html: segment.content,
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 export const SourceSelectorSheet = ({
   isOpen,
   onOpenChange,
@@ -30,6 +146,9 @@ export const SourceSelectorSheet = ({
   const [searchFilter, setSearchFilter] = useState("");
   const [debouncedSearchFilter] = useDebounce(searchFilter, 500);
   const [pagination, setPagination] = useState({ currentPage: 1, limit: 10 });
+  const [searchOnlyTitles, setSearchOnlyTitles] = useState(true);
+  const [selectedSource, setSelectedSource] = useState<any>(null);
+
   const skip = useMemo(
     () => (pagination.currentPage - 1) * pagination.limit,
     [pagination],
@@ -62,9 +181,16 @@ export const SourceSelectorSheet = ({
     if (sourceData?.content) {
       onAddSource(sourceData);
       onOpenChange(false);
+      setSelectedSource(null);
     }
   };
+
   const sources = searchData?.sources || [];
+  const segments = selectedSource?.segment_matches || [];
+
+  const handleTitleClick = (source: any) => {
+    setSelectedSource(source);
+  };
 
   const renderSegmentList = () => {
     if (sources.length === 0) {
@@ -82,12 +208,62 @@ export const SourceSelectorSheet = ({
         </div>
       );
     }
+
+    if (searchOnlyTitles) {
+      return (
+        <>
+          {sources.map((source: any, index: number) => {
+            const isSelected =
+              selectedSource?.text.text_id === source.text.text_id;
+            return (
+              <div key={source.text.text_id || index}>
+                <button
+                  className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${
+                    isSelected
+                      ? "border-[#801A1E] dark:border-[#801A1E]"
+                      : "border-gray-300 dark:border-[#313132]"
+                  }`}
+                  onClick={() => handleTitleClick(source)}
+                >
+                  <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
+                    {source.text.title}
+                  </p>
+                  <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
+                </button>
+
+                {isSelected && segments.length > 0 && (
+                  <SelectedSourceDetail
+                    segments={segments}
+                    selectedSource={selectedSource}
+                    onAdd={handleAddSource}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </>
+      );
+    }
+
     return sources.map((source: any) => (
-      <SourceItem source={source} onSegment={handleAddSource} />
+      <SourceItem
+        key={source.text.text_id}
+        source={source}
+        onSegment={handleAddSource}
+      />
     ));
   };
+
   return (
-    <Pecha.Sheet open={isOpen} onOpenChange={onOpenChange}>
+    <Pecha.Sheet
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          setSelectedSource(null);
+        }
+        onOpenChange(open);
+      }}
+    >
       <Pecha.SheetContent side="right" className="w-full sm:max-w-md">
         <Pecha.SheetHeader>
           <Pecha.SheetTitle>Add Source</Pecha.SheetTitle>
@@ -96,7 +272,7 @@ export const SourceSelectorSheet = ({
           </Pecha.SheetDescription>
         </Pecha.SheetHeader>
         <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
-        <div className="p-2">
+        <div className="px-2 pt-2">
           <div className="border w-full px-2 rounded-md border-gray-200 dark:border-[#313132] flex items-center">
             <IoMdSearch className="w-4 h-4" />
             <Pecha.Input
@@ -106,8 +282,18 @@ export const SourceSelectorSheet = ({
               onChange={(e) => setSearchFilter(e.target.value)}
             />
           </div>
+          <label className="flex items-center gap-2 px-1 pt-5 cursor-pointer">
+            <Pecha.Checkbox
+              checked={searchOnlyTitles}
+              onCheckedChange={(checked: boolean) =>
+                setSearchOnlyTitles(!!checked)
+              }
+              className="data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
+            />
+            <span className="text-sm select-none">Search only titles</span>
+          </label>
         </div>
-        <div className="p-4 space-y-4 border-y border-dashed border-gray-300 dark:border-input h-[540px] overflow-y-auto">
+        <div className="px-4 pt-1.5 pb-4 space-y-4 h-[540px] overflow-y-auto">
           {isLoading ? (
             <div className="w-full flex items-center justify-center h-full">
               <p>Loading segments...</p>
diff --git a/src/components/ui/shadimport.ts b/src/components/ui/shadimport.ts
index 788a0ef8..4d9e0149 100644
--- a/src/components/ui/shadimport.ts
+++ b/src/components/ui/shadimport.ts
@@ -46,6 +46,7 @@ import { ButtonGroup } from "@/components/ui/atoms/button-group";
 import { Badge } from "@/components/ui/atoms/badge";
 import { Textarea } from "@/components/ui/atoms/textarea";
 import { Skeleton } from "@/components/ui/atoms/skeleton";
+import { Checkbox } from "@/components/ui/atoms/checkbox";
 
 import {
   Pagination,
@@ -132,4 +133,5 @@ export const Pecha = {
   Badge,
   Textarea,
   Skeleton,
+  Checkbox,
 };

From fa735cc923b4c161beab6ee315bdc022418b5932 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Thu, 16 Apr 2026 10:35:40 +0530
Subject: [PATCH 02/13] updated

---
 package-lock.json                             | 969 ++++++++++++++++--
 package.json                                  |   2 +
 src/components/api/searchApi.ts               |  41 +
 .../routes/create-plan/CreatePlan.tsx         |   1 +
 .../webuddhist-source/SourceSelectorSheet.tsx | 275 +++--
 .../webuddhist-source/sourceItem.tsx          |  22 +-
 src/lib/utils.ts                              |  58 ++
 7 files changed, 1220 insertions(+), 148 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 98e1bf91..710d545e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,12 +31,14 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "crypto-js": "^4.2.0",
+        "radix-ui": "^1.4.3",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-dropzone": "^14.3.8",
         "react-easy-crop": "^5.5.0",
         "react-hook-form": "^7.62.0",
         "react-icons": "^5.5.0",
+        "react-intersection-observer": "^10.0.3",
         "react-router-dom": "^7.8.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
@@ -1427,6 +1429,60 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-alert-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
@@ -1478,6 +1534,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
@@ -1508,6 +1614,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1564,6 +1700,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -1711,6 +1875,65 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -1721,21 +1944,451 @@
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-label": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
-      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1752,12 +2405,13 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.16",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
-      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
       "license": "MIT",
       "dependencies": {
+        "@radix-ui/number": "1.1.1",
         "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -1769,11 +2423,13 @@
         "@radix-ui/react-id": "1.1.1",
         "@radix-ui/react-popper": "1.2.8",
         "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.11",
         "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
         "aria-hidden": "^1.2.4",
         "react-remove-scroll": "^2.6.3"
       },
@@ -1792,22 +2448,13 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
-      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-rect": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1",
-        "@radix-ui/rect": "1.1.1"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1824,14 +2471,23 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
-      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
       "license": "MIT",
       "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1848,37 +2504,37 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
-      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
+        "@radix-ui/react-compose-refs": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
-      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.2.3"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1895,20 +2551,19 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
-      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-roving-focus": "1.1.11",
         "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
@@ -1926,33 +2581,24 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
-      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/number": "1.1.1",
         "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-dismissable-layer": "1.1.11",
-        "@radix-ui/react-focus-guards": "1.1.3",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.8",
         "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.2.3",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
+        "@radix-ui/react-visually-hidden": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1969,13 +2615,15 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-separator": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
-      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1992,21 +2640,61 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
         }
       }
     },
@@ -2113,6 +2801,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -6072,6 +6778,83 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -6149,6 +6932,21 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-10.0.3.tgz",
+      "integrity": "sha512-luICLMbs0zxTO/70Zy7K5jOXkABPEVSAF8T3FdZUlctsrIaPLmx8TZe2SSA+CY2HGWfz2INyNTnp82pxNNsShA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -7083,6 +7881,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
diff --git a/package.json b/package.json
index 515f4755..a32e8421 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-dropzone": "^14.3.8",
     "react-easy-crop": "^5.5.0",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
+    "react-intersection-observer": "^10.0.3",
     "react-router-dom": "^7.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
diff --git a/src/components/api/searchApi.ts b/src/components/api/searchApi.ts
index 72578403..4694d9b2 100644
--- a/src/components/api/searchApi.ts
+++ b/src/components/api/searchApi.ts
@@ -22,4 +22,45 @@ export const searchSources = async ({
   return data;
 };
 
+export const searchTitles = async ({
+  title,
+  limit = 20,
+  offset = 0,
+}: {
+  title: string;
+  limit?: number;
+  offset?: number;
+}) => {
+  const { data } = await axiosInstance.get(`/api/v1/texts/title-search`, {
+    params: {
+      title,
+      limit,
+      offset,
+    },
+  });
+  return data;
+};
+
+export const fetchTextDetails = async ({
+  textId,
+  contentId,
+  segmentId,
+  direction = "next",
+  size = 20,
+}: {
+  textId: string;
+  contentId?: string;
+  segmentId?: string;
+  direction?: "next" | "previous";
+  size?: number;
+}) => {
+  const { data } = await axiosInstance.post(`/api/v1/texts/${textId}/details`, {
+    ...(contentId && { content_id: contentId }),
+    ...(segmentId && { segment_id: segmentId }),
+    direction,
+    size,
+  });
+  return data;
+};
+
 export type { SearchCommon };
diff --git a/src/components/routes/create-plan/CreatePlan.tsx b/src/components/routes/create-plan/CreatePlan.tsx
index 44d32d61..d569d3f5 100644
--- a/src/components/routes/create-plan/CreatePlan.tsx
+++ b/src/components/routes/create-plan/CreatePlan.tsx
@@ -306,6 +306,7 @@ const Createplan = () => {
                               </p>
                             )}
                             <button
+                              aria-label="Remove image"
                               type="button"
                               onClick={handleRemoveImage}
                               className=" text-white cursor-pointer rounded-full p-1 transition-colors ml-2"
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 0d6b255b..217b628c 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -1,13 +1,19 @@
 import { Pecha } from "@/components/ui/shadimport";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { IoMdSearch } from "react-icons/io";
 import { useTranslate } from "@tolgee/react";
 import { useDebounce } from "use-debounce";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
+import { useInView } from "react-intersection-observer";
 import SourceItem from "./sourceItem";
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
-import { searchSources } from "@/components/api/searchApi";
+import {
+  searchSources,
+  searchTitles,
+  fetchTextDetails,
+} from "@/components/api/searchApi";
+import { flattenSegments, getLastSegmentId } from "@/lib/utils";
 
 interface SourceData {
   content: string;
@@ -22,38 +28,74 @@ interface SourceSelectorSheetProps {
   onAddSource: (sourceData: SourceData) => void;
 }
 
-const parseRange = (
-  input: string,
-  max: number,
-): { start: number; end: number } | null => {
-  const match = input.trim().match(/^(\d+)\s*-\s*(\d+)$/);
-  if (!match) return null;
-  const start = parseInt(match[1], 10);
-  const end = parseInt(match[2], 10);
-  if (start < 1 || end < start || start > max) return null;
-  return { start, end: Math.min(end, max) };
+const RANGE_REGEX = /^(\d+)\s*-\s*(\d+)$/;
+const SINGLE_REGEX = /^(\d+)$/;
+
+const parsePart = (part: string, max: number): number[] | null => {
+  const rangeMatch = RANGE_REGEX.exec(part);
+  if (rangeMatch) {
+    const start = Number.parseInt(rangeMatch[1], 10);
+    const end = Number.parseInt(rangeMatch[2], 10);
+    if (start < 1 || end < start || start > max) return null;
+    const result: number[] = [];
+    for (let i = start; i <= Math.min(end, max); i++) result.push(i);
+    return result;
+  }
+
+  const singleMatch = SINGLE_REGEX.exec(part);
+  if (singleMatch) {
+    const num = Number.parseInt(singleMatch[1], 10);
+    if (num < 1 || num > max) return null;
+    return [num];
+  }
+
+  return null;
+};
+
+const parseSelection = (input: string, max: number): Set<number> | null => {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+
+  const parts = trimmed
+    .split(",")
+    .map((p) => p.trim())
+    .filter(Boolean);
+  if (parts.length === 0) return null;
+
+  const selected = new Set<number>();
+  for (const part of parts) {
+    const nums = parsePart(part, max);
+    if (nums === null) return null;
+    nums.forEach((n) => selected.add(n));
+  }
+
+  return selected.size > 0 ? selected : null;
 };
 
 const SelectedSourceDetail = ({
   segments,
   selectedSource,
   onAdd,
+  bottomRef,
+  isFetchingNextPage,
 }: {
   segments: any[];
   selectedSource: any;
   onAdd: (sourceData: SourceData) => void;
+  bottomRef?: (node?: Element | null) => void;
+  isFetchingNextPage?: boolean;
 }) => {
   const [rangeInput, setRangeInput] = useState("");
   const [selectAll, setSelectAll] = useState(false);
 
   const segmentCount = segments.length;
 
-  const parsedRange = useMemo(() => {
+  const selectedIndices = useMemo(() => {
     if (!segmentCount) return null;
-    return parseRange(rangeInput, segmentCount);
+    return parseSelection(rangeInput, segmentCount);
   }, [rangeInput, segmentCount]);
 
-  const isAddDisabled = !parsedRange;
+  const isAddDisabled = !selectedIndices;
 
   const handleSelectAll = (checked: boolean) => {
     setSelectAll(checked);
@@ -65,17 +107,19 @@ const SelectedSourceDetail = ({
   };
 
   const handleAdd = () => {
-    if (!parsedRange || !selectedSource) return;
-    const { start, end } = parsedRange;
-    const selected = segments.slice(start - 1, end);
+    if (!selectedIndices || !selectedSource) return;
+    const sortedIndices = Array.from(selectedIndices).sort((a, b) => a - b);
+    const selected = sortedIndices.map((i) => segments[i - 1]).filter(Boolean);
     const content = selected.map((seg: any) => seg.content).join("\n");
     const segmentIds = selected.map((seg: any) => seg.segment_id);
     const pechaSegmentId = selected[0]?.pecha_segment_id || "";
 
+    const textId = selectedSource.id;
+
     onAdd({
       content,
       pecha_segment_id: pechaSegmentId,
-      text_id: selectedSource.text.text_id,
+      text_id: textId,
       segment_ids: segmentIds,
     });
   };
@@ -100,7 +144,7 @@ const SelectedSourceDetail = ({
 
       <div className="flex items-center gap-2">
         <Pecha.Input
-          placeholder={`1-${segmentCount}`}
+          placeholder="1-10"
           value={rangeInput}
           onChange={(e) => {
             setRangeInput(e.target.value);
@@ -119,20 +163,38 @@ const SelectedSourceDetail = ({
         </Pecha.Button>
       </div>
 
-      <div className="space-y-3 max-h-[300px] overflow-y-auto">
-        {segments.map((segment: any, segIndex: number) => (
+      <div className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] p-4 space-y-4 overflow-y-auto max-h-[calc(100vh-380px)]">
+        {segments.map((segment: any, segIndex: number) => {
+          const isSelected = selectedIndices?.has(segIndex + 1);
+          return (
+            <div
+              key={segment.segment_id || segIndex}
+              className={`border p-3 rounded-[10px] text-sm transition-colors ${
+                isSelected
+                  ? "bg-[#E5E5E5] dark:bg-[#2a2a2b] border-solid border-[#CFCFCF] dark:border-[#4a4a4b]"
+                  : "bg-[#F9F9F9] dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
+              }`}
+            >
+              <span className="font-medium">{segIndex + 1}. </span>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: segment.content,
+                }}
+              />
+            </div>
+          );
+        })}
+        {bottomRef && (
           <div
-            key={segment.segment_id || segIndex}
-            className="border p-3 rounded-md border-dashed border-gray-300 dark:border-[#313132] text-sm"
-          >
-            <span className="font-medium">{segIndex + 1}. </span>
-            <span
-              dangerouslySetInnerHTML={{
-                __html: segment.content,
-              }}
-            />
-          </div>
-        ))}
+            ref={bottomRef}
+            className="h-5 w-full opacity-0 pointer-events-none"
+          />
+        )}
+        {isFetchingNextPage && (
+          <p className="text-center text-sm text-gray-500">
+            Loading more segments...
+          </p>
+        )}
       </div>
     </div>
   );
@@ -153,23 +215,100 @@ export const SourceSelectorSheet = ({
     () => (pagination.currentPage - 1) * pagination.limit,
     [pagination],
   );
-  const { data: searchData, isLoading } = useQuery({
+
+  const { data: multilingualData, isLoading: isMultilingualLoading } = useQuery(
+    {
+      queryKey: [
+        "topics",
+        debouncedSearchFilter,
+        pagination.currentPage,
+        pagination.limit,
+      ],
+      queryFn: () =>
+        searchSources({
+          query: debouncedSearchFilter,
+          limit: pagination.limit,
+          skip,
+        }),
+      refetchOnWindowFocus: false,
+      enabled: isOpen && !searchOnlyTitles,
+    },
+  );
+
+  const { data: titleData, isLoading: isTitleLoading } = useQuery({
     queryKey: [
-      "topics",
+      "titleSearch",
       debouncedSearchFilter,
       pagination.currentPage,
       pagination.limit,
     ],
     queryFn: () =>
-      searchSources({
-        query: debouncedSearchFilter,
+      searchTitles({
+        title: debouncedSearchFilter,
         limit: pagination.limit,
-        skip,
+        offset: skip,
+      }),
+    refetchOnWindowFocus: false,
+    enabled: isOpen && searchOnlyTitles && debouncedSearchFilter.length > 0,
+  });
+
+  const {
+    data: detailsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["textDetails", selectedSource?.id],
+    initialPageParam: undefined as
+      | { segmentId: string; direction: "next" | "previous" }
+      | undefined,
+    queryFn: ({ pageParam }) =>
+      fetchTextDetails({
+        textId: selectedSource.id,
+        segmentId: pageParam?.segmentId,
+        direction: pageParam?.direction as "next" | "previous" | undefined,
+        size: 20,
       }),
+    getNextPageParam: (lastPage: any) => {
+      if (lastPage?.current_segment_position >= lastPage?.total_segments)
+        return undefined;
+      const lastSegmentId = getLastSegmentId(lastPage.content.sections);
+      if (!lastSegmentId) return undefined;
+      return { segmentId: lastSegmentId, direction: "next" };
+    },
+    enabled: !!selectedSource?.id && searchOnlyTitles,
     refetchOnWindowFocus: false,
-    enabled: isOpen,
   });
-  const totalSegments = searchData?.total || 0;
+
+  const { ref: bottomSentinelRef, inView: isBottomVisible } = useInView({
+    threshold: 0.1,
+    rootMargin: "50px",
+  });
+
+  useEffect(() => {
+    if (isBottomVisible && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [isBottomVisible, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const detailSegments = useMemo(() => {
+    if (!detailsData?.pages) return [];
+    return detailsData.pages.flatMap((page) =>
+      flattenSegments(page.content.sections),
+    );
+  }, [detailsData?.pages]);
+
+  const isLoading = searchOnlyTitles ? isTitleLoading : isMultilingualLoading;
+
+  const sources = searchOnlyTitles
+    ? titleData || []
+    : multilingualData?.sources || [];
+
+  const segments = searchOnlyTitles
+    ? detailSegments
+    : selectedSource?.segment_matches || [];
+
+  const totalSegments = multilingualData?.total || 0;
   const totalPages = Math.ceil(totalSegments / pagination.limit);
 
   const handlePageChange = (pageNumber: number) => {
@@ -185,17 +324,14 @@ export const SourceSelectorSheet = ({
     }
   };
 
-  const sources = searchData?.sources || [];
-  const segments = selectedSource?.segment_matches || [];
-
   const handleTitleClick = (source: any) => {
-    setSelectedSource(source);
+    setSelectedSource((prev: any) => (prev?.id === source.id ? null : source));
   };
 
   const renderSegmentList = () => {
     if (sources.length === 0) {
       return (
-        <div className=" text-center h-full flex flex-col items-center justify-center">
+        <div className="text-center min-h-[400px] flex flex-col items-center justify-center">
           <img
             src={pechaIcon}
             alt="no data found"
@@ -213,10 +349,9 @@ export const SourceSelectorSheet = ({
       return (
         <>
           {sources.map((source: any, index: number) => {
-            const isSelected =
-              selectedSource?.text.text_id === source.text.text_id;
+            const isSelected = selectedSource?.id === source.id;
             return (
-              <div key={source.text.text_id || index}>
+              <div key={source.id || index}>
                 <button
                   className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${
                     isSelected
@@ -226,7 +361,7 @@ export const SourceSelectorSheet = ({
                   onClick={() => handleTitleClick(source)}
                 >
                   <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
-                    {source.text.title}
+                    {source.title}
                   </p>
                   <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
                 </button>
@@ -236,6 +371,8 @@ export const SourceSelectorSheet = ({
                     segments={segments}
                     selectedSource={selectedSource}
                     onAdd={handleAddSource}
+                    bottomRef={bottomSentinelRef}
+                    isFetchingNextPage={isFetchingNextPage}
                   />
                 )}
               </div>
@@ -250,6 +387,7 @@ export const SourceSelectorSheet = ({
         key={source.text.text_id}
         source={source}
         onSegment={handleAddSource}
+        searchQuery={debouncedSearchFilter}
       />
     ));
   };
@@ -260,6 +398,8 @@ export const SourceSelectorSheet = ({
       onOpenChange={(open) => {
         if (!open) {
           setSelectedSource(null);
+          setSearchFilter("");
+          setPagination({ currentPage: 1, limit: 10 });
         }
         onOpenChange(open);
       }}
@@ -285,24 +425,35 @@ export const SourceSelectorSheet = ({
           <label className="flex items-center gap-2 px-1 pt-5 cursor-pointer">
             <Pecha.Checkbox
               checked={searchOnlyTitles}
-              onCheckedChange={(checked: boolean) =>
-                setSearchOnlyTitles(!!checked)
-              }
+              onCheckedChange={(checked: boolean) => {
+                setSearchOnlyTitles(!!checked);
+                setPagination({ currentPage: 1, limit: 10 });
+                setSelectedSource(null);
+              }}
               className="data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
             />
             <span className="text-sm select-none">Search only titles</span>
           </label>
-        </div>
-        <div className="px-4 pt-1.5 pb-4 space-y-4 h-[540px] overflow-y-auto">
-          {isLoading ? (
-            <div className="w-full flex items-center justify-center h-full">
-              <p>Loading segments...</p>
-            </div>
-          ) : (
-            renderSegmentList()
+          {sources.length > 0 && !searchOnlyTitles && (
+            <p className="text-sm text-black dark:text-gray-200 px-1 pt-2">
+              Results: {totalSegments}
+            </p>
           )}
         </div>
-        {sources.length > 0 && (
+        <div className="h-[calc(100vh-200px)] overflow-hidden">
+          <div
+            className={`px-4 pb-4 space-y-4 ${searchOnlyTitles ? "pt-1.5" : "pt-2"}`}
+          >
+            {isLoading ? (
+              <div className="w-full flex items-center justify-center h-full">
+                <p>Loading segments...</p>
+              </div>
+            ) : (
+              renderSegmentList()
+            )}
+          </div>
+        </div>
+        {sources.length > 0 && !searchOnlyTitles && (
           <Pagination
             currentPage={pagination.currentPage}
             totalPages={totalPages}
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index aafeb49a..50eb99de 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -1,18 +1,20 @@
 import pechaIcon from "@/assets/icon/pecha_icon.png";
+import { highlightSearchMatch } from "@/lib/utils";
 
-const SourceItem = ({ source, onSegment }: any) => {
+const SourceItem = ({ source, onSegment, searchQuery }: any) => {
   return (
-    <div className="border p-2 space-y-4 rounded-md">
+    <div className="border p-2 space-y-4 rounded-md max-h-[calc(100vh-370px)] flex flex-col overflow-hidden">
       <div className="flex items-center justify-between">
-        <p className=" font-bold text-[#801A1E] dark:text-[#b0b0b0]">
+        <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
           {source.text.title}
         </p>
         <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 overflow-y-auto flex-1 min-h-0">
         {source.segment_matches?.map((segment: any, index: number) => (
           <button
             key={segment.segment_id || index}
+            aria-label={`Select segment ${index + 1}`}
             className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
             onClick={() =>
               onSegment?.({
@@ -23,7 +25,17 @@ const SourceItem = ({ source, onSegment }: any) => {
               })
             }
           >
-            <div dangerouslySetInnerHTML={{ __html: segment.content }} />
+            <div
+              dangerouslySetInnerHTML={{
+                __html: searchQuery
+                  ? highlightSearchMatch(
+                      segment.content,
+                      searchQuery,
+                      "bg-yellow-300 px-0.5 text-black",
+                    )
+                  : segment.content,
+              }}
+            />
           </button>
         ))}
       </div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 974f0b7b..ae2f679c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -121,3 +121,61 @@ export const reorderArray = <T extends { id: string }>(
 
   return newItems;
 };
+
+const escapeRegex = (value: string) =>
+  value.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+
+export const highlightSearchMatch = (
+  text: string,
+  searchTerm: string,
+  highlightClass = "highlighted-text",
+) => {
+  if (!text || !searchTerm || searchTerm.trim() === "") {
+    return text;
+  }
+
+  const escaped = escapeRegex(searchTerm);
+  const isLatinQuery = /^[\p{Script=Latin}\d\s'''.:-]+$/u.test(searchTerm);
+
+  if (isLatinQuery) {
+    const wordRegex = new RegExp(
+      String.raw`(^|\P{L})(${escaped})(?=\P{L}|$)`,
+      "giu",
+    );
+    return text.replace(wordRegex, (_, separator, match) => {
+      return `${separator}<span class="${highlightClass}">${match}</span>`;
+    });
+  }
+
+  const subRegex = new RegExp(escaped, "giu");
+  return text.replace(
+    subRegex,
+    (match) => `<span class="${highlightClass}">${match}</span>`,
+  );
+};
+
+export const getLastSegmentId = (sections: any[]): string | null => {
+  if (!sections?.length) {
+    return null;
+  }
+  const lastSection = sections.at(-1);
+  return (
+    getLastSegmentId(lastSection.sections) ??
+    lastSection.segments?.at(-1)?.segment_id ??
+    null
+  );
+};
+
+export const flattenSegments = (sections: any[]): any[] => {
+  if (!sections?.length) return [];
+  const result: any[] = [];
+  for (const section of sections) {
+    if (section.segments?.length) {
+      result.push(...section.segments);
+    }
+    if (section.sections?.length) {
+      result.push(...flattenSegments(section.sections));
+    }
+  }
+  return result;
+};

From e5cc1dccb6c3597c1881488bc116c783960b316c Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Thu, 16 Apr 2026 16:16:48 +0530
Subject: [PATCH 03/13] scroll fix

---
 src/components/ui/atoms/scroll-area.tsx       |  56 +++++++++
 .../webuddhist-source/SourceSelectorSheet.tsx | 118 ++++++++----------
 .../webuddhist-source/sourceItem.tsx          |  65 +++++-----
 3 files changed, 142 insertions(+), 97 deletions(-)
 create mode 100644 src/components/ui/atoms/scroll-area.tsx

diff --git a/src/components/ui/atoms/scroll-area.tsx b/src/components/ui/atoms/scroll-area.tsx
new file mode 100644
index 00000000..19569421
--- /dev/null
+++ b/src/components/ui/atoms/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 217b628c..ae8b9848 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -7,6 +7,7 @@ import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
 import { useInView } from "react-intersection-observer";
 import SourceItem from "./sourceItem";
 import pechaIcon from "@/assets/icon/pecha_icon.png";
+import { ScrollArea } from "@/components/ui/atoms/scroll-area";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
 import {
   searchSources,
@@ -31,47 +32,30 @@ interface SourceSelectorSheetProps {
 const RANGE_REGEX = /^(\d+)\s*-\s*(\d+)$/;
 const SINGLE_REGEX = /^(\d+)$/;
 
-const parsePart = (part: string, max: number): number[] | null => {
-  const rangeMatch = RANGE_REGEX.exec(part);
+const parseSelection = (input: string, max: number): Set<number> | null => {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+
+  const rangeMatch = RANGE_REGEX.exec(trimmed);
   if (rangeMatch) {
     const start = Number.parseInt(rangeMatch[1], 10);
     const end = Number.parseInt(rangeMatch[2], 10);
     if (start < 1 || end < start || start > max) return null;
-    const result: number[] = [];
-    for (let i = start; i <= Math.min(end, max); i++) result.push(i);
-    return result;
+    const selected = new Set<number>();
+    for (let i = start; i <= Math.min(end, max); i++) selected.add(i);
+    return selected;
   }
 
-  const singleMatch = SINGLE_REGEX.exec(part);
+  const singleMatch = SINGLE_REGEX.exec(trimmed);
   if (singleMatch) {
     const num = Number.parseInt(singleMatch[1], 10);
     if (num < 1 || num > max) return null;
-    return [num];
+    return new Set([num]);
   }
 
   return null;
 };
 
-const parseSelection = (input: string, max: number): Set<number> | null => {
-  const trimmed = input.trim();
-  if (!trimmed) return null;
-
-  const parts = trimmed
-    .split(",")
-    .map((p) => p.trim())
-    .filter(Boolean);
-  if (parts.length === 0) return null;
-
-  const selected = new Set<number>();
-  for (const part of parts) {
-    const nums = parsePart(part, max);
-    if (nums === null) return null;
-    nums.forEach((n) => selected.add(n));
-  }
-
-  return selected.size > 0 ? selected : null;
-};
-
 const SelectedSourceDetail = ({
   segments,
   selectedSource,
@@ -163,39 +147,44 @@ const SelectedSourceDetail = ({
         </Pecha.Button>
       </div>
 
-      <div className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] p-4 space-y-4 overflow-y-auto max-h-[calc(100vh-380px)]">
-        {segments.map((segment: any, segIndex: number) => {
-          const isSelected = selectedIndices?.has(segIndex + 1);
-          return (
+      <ScrollArea
+        type="scroll"
+        className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
+      >
+        <div className="p-4 space-y-4">
+          {segments.map((segment: any, segIndex: number) => {
+            const isSelected = selectedIndices?.has(segIndex + 1);
+            return (
+              <div
+                key={segment.segment_id || segIndex}
+                className={`border p-3 rounded-[10px] text-sm transition-colors ${
+                  isSelected
+                    ? "bg-[#E5E5E5] dark:bg-[#2a2a2b] border-solid border-[#CFCFCF] dark:border-[#4a4a4b]"
+                    : "bg-[#F9F9F9] dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
+                }`}
+              >
+                <span className="font-medium">{segIndex + 1}. </span>
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: segment.content,
+                  }}
+                />
+              </div>
+            );
+          })}
+          {bottomRef && (
             <div
-              key={segment.segment_id || segIndex}
-              className={`border p-3 rounded-[10px] text-sm transition-colors ${
-                isSelected
-                  ? "bg-[#E5E5E5] dark:bg-[#2a2a2b] border-solid border-[#CFCFCF] dark:border-[#4a4a4b]"
-                  : "bg-[#F9F9F9] dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
-              }`}
-            >
-              <span className="font-medium">{segIndex + 1}. </span>
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: segment.content,
-                }}
-              />
-            </div>
-          );
-        })}
-        {bottomRef && (
-          <div
-            ref={bottomRef}
-            className="h-5 w-full opacity-0 pointer-events-none"
-          />
-        )}
-        {isFetchingNextPage && (
-          <p className="text-center text-sm text-gray-500">
-            Loading more segments...
-          </p>
-        )}
-      </div>
+              ref={bottomRef}
+              className="h-5 w-full opacity-0 pointer-events-none"
+            />
+          )}
+          {isFetchingNextPage && (
+            <p className="text-center text-sm text-gray-500">
+              Loading more segments...
+            </p>
+          )}
+        </div>
+      </ScrollArea>
     </div>
   );
 };
@@ -434,15 +423,12 @@ export const SourceSelectorSheet = ({
             />
             <span className="text-sm select-none">Search only titles</span>
           </label>
-          {sources.length > 0 && !searchOnlyTitles && (
-            <p className="text-sm text-black dark:text-gray-200 px-1 pt-2">
-              Results: {totalSegments}
-            </p>
-          )}
         </div>
-        <div className="h-[calc(100vh-200px)] overflow-hidden">
+        <div className="h-[calc(100vh-200px)] overflow-hidden flex flex-col">
           <div
-            className={`px-4 pb-4 space-y-4 ${searchOnlyTitles ? "pt-1.5" : "pt-2"}`}
+            className={`px-4 pb-4 pt-2 ${
+              searchOnlyTitles ? "space-y-4 overflow-y-auto" : "flex-1 min-h-0"
+            }`}
           >
             {isLoading ? (
               <div className="w-full flex items-center justify-center h-full">
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index 50eb99de..67cec981 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -1,44 +1,47 @@
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { highlightSearchMatch } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/atoms/scroll-area";
 
 const SourceItem = ({ source, onSegment, searchQuery }: any) => {
   return (
-    <div className="border p-2 space-y-4 rounded-md max-h-[calc(100vh-370px)] flex flex-col overflow-hidden">
-      <div className="flex items-center justify-between">
+    <div className="border rounded-md flex flex-col h-full overflow-hidden">
+      <div className="flex items-center justify-between p-2 pb-0">
         <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
           {source.text.title}
         </p>
         <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
       </div>
-      <div className="flex flex-col gap-2 overflow-y-auto flex-1 min-h-0">
-        {source.segment_matches?.map((segment: any, index: number) => (
-          <button
-            key={segment.segment_id || index}
-            aria-label={`Select segment ${index + 1}`}
-            className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
-            onClick={() =>
-              onSegment?.({
-                content: segment.content,
-                pecha_segment_id: segment.pecha_segment_id,
-                text_id: source.text.text_id,
-                segment_ids: [segment.segment_id],
-              })
-            }
-          >
-            <div
-              dangerouslySetInnerHTML={{
-                __html: searchQuery
-                  ? highlightSearchMatch(
-                      segment.content,
-                      searchQuery,
-                      "bg-yellow-300 px-0.5 text-black",
-                    )
-                  : segment.content,
-              }}
-            />
-          </button>
-        ))}
-      </div>
+      <ScrollArea type="scroll" className="flex-1 min-h-0 mt-3">
+        <div className="flex flex-col gap-2 px-2 pb-2">
+          {source.segment_matches?.map((segment: any, index: number) => (
+            <button
+              key={segment.segment_id || index}
+              aria-label={`Select segment ${index + 1}`}
+              className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
+              onClick={() =>
+                onSegment?.({
+                  content: segment.content,
+                  pecha_segment_id: segment.pecha_segment_id,
+                  text_id: source.text.text_id,
+                  segment_ids: [segment.segment_id],
+                })
+              }
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: searchQuery
+                    ? highlightSearchMatch(
+                        segment.content,
+                        searchQuery,
+                        "bg-yellow-300 px-0.5 text-black",
+                      )
+                    : segment.content,
+                }}
+              />
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
     </div>
   );
 };

From 4b8a510661eda6ea705945b4c2bb34e32d2c5417 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Fri, 17 Apr 2026 11:30:10 +0530
Subject: [PATCH 04/13] style fix

---
 .../webuddhist-source/SourceSelectorSheet.tsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index ae8b9848..9fa352ad 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -134,7 +134,7 @@ const SelectedSourceDetail = ({
             setRangeInput(e.target.value);
             setSelectAll(false);
           }}
-          className="flex-1 h-10"
+          className={`flex-1 h-10 ${rangeInput.trim() !== "" && !rangeInput.trim().endsWith("-") && !selectedIndices ? "ring-1 ring-red-500 dark:ring-red-400" : ""}`}
         />
         <Pecha.Button
           type="button"
@@ -147,6 +147,12 @@ const SelectedSourceDetail = ({
         </Pecha.Button>
       </div>
 
+      {rangeInput.trim() !== "" && !rangeInput.trim().endsWith("-") && !selectedIndices && (
+        <p className="text-xs text-red-500 dark:text-red-400 -mt-1">
+          Enter a single number (e.g. 3) or a range (e.g. 1-10)
+        </p>
+      )}
+
       <ScrollArea
         type="scroll"
         className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
@@ -159,7 +165,7 @@ const SelectedSourceDetail = ({
                 key={segment.segment_id || segIndex}
                 className={`border p-3 rounded-[10px] text-sm transition-colors ${
                   isSelected
-                    ? "bg-[#E5E5E5] dark:bg-[#2a2a2b] border-solid border-[#CFCFCF] dark:border-[#4a4a4b]"
+                    ? "bg-[#F9F9F9] dark:bg-sidebar-secondary border-solid border-foreground dark:border-foreground"
                     : "bg-[#F9F9F9] dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
                 }`}
               >
@@ -427,7 +433,7 @@ export const SourceSelectorSheet = ({
         <div className="h-[calc(100vh-200px)] overflow-hidden flex flex-col">
           <div
             className={`px-4 pb-4 pt-2 ${
-              searchOnlyTitles ? "space-y-4 overflow-y-auto" : "flex-1 min-h-0"
+              searchOnlyTitles ? "space-y-4" : "flex-1 min-h-0"
             }`}
           >
             {isLoading ? (

From e979ee303efd0b86b77ee1eb6e6ad170fdc42b08 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Fri, 17 Apr 2026 11:46:08 +0530
Subject: [PATCH 05/13] lint fix

---
 .../webuddhist-source/SourceSelectorSheet.tsx        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 9fa352ad..f2bf6980 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -147,11 +147,13 @@ const SelectedSourceDetail = ({
         </Pecha.Button>
       </div>
 
-      {rangeInput.trim() !== "" && !rangeInput.trim().endsWith("-") && !selectedIndices && (
-        <p className="text-xs text-red-500 dark:text-red-400 -mt-1">
-          Enter a single number (e.g. 3) or a range (e.g. 1-10)
-        </p>
-      )}
+      {rangeInput.trim() !== "" &&
+        !rangeInput.trim().endsWith("-") &&
+        !selectedIndices && (
+          <p className="text-xs text-red-500 dark:text-red-400 -mt-1">
+            Enter a single number (e.g. 3) or a range (e.g. 1-10)
+          </p>
+        )}
 
       <ScrollArea
         type="scroll"

From c9ace72a0f5ca3787032e61753a8e3b0dbcb2621 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Fri, 17 Apr 2026 11:51:49 +0530
Subject: [PATCH 06/13] remove since no longer needed

---
 .../sprint-33-WeBuddhist-Studio.md            | 25 -------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md

diff --git a/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md b/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md
deleted file mode 100644
index 00a63714..00000000
--- a/docs/sprint-release-notes/sprint-33-WeBuddhist-Studio.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# 🚀 Sprint Release Notes: Iteration 33 - WeBuddhist-Studio
-
-**Date:** 2026-04-02 | **Version:** v1.33.0 | **Status:** Shipped | **Repository:** OpenPecha/WeBuddhist-Studio
-
----
-
-## Summary
-
-This sprint delivered **2** item(s) in **OpenPecha/WeBuddhist-Studio**.
-
-## ✨ New Features
-
-- **STUDIO: Remove language param for search**: dont send language when performing multilingual search. due to this text were not showing
-
-<img width="1919" height="869" alt="Image" src="https://github.com/user-attachments/assets/a41a92dd-9f4e-4f95
-
-## 🐛 Bug Fixes
-
-- **STUDIO: make tag case sensitive and trim it**: if we type Anger it goes as Anger , if we type anger it goes as anger. if we type space Anger space , the space is taken along with it.
-
-now three tag with same meaning are created. so before putting
-
----
-
-_Generated from GitHub Project Board - Iteration 33_

From 31645b28282de3be0a9f03f472995397b4c93a56 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Fri, 17 Apr 2026 12:28:15 +0530
Subject: [PATCH 07/13] simplify

---
 .../ui/molecules/webuddhist-source/SourceSelectorSheet.tsx  | 5 ++---
 .../ui/molecules/webuddhist-source/sourceItem.tsx           | 6 +++---
 src/components/ui/shadimport.ts                             | 2 ++
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index f2bf6980..b3cbbe5d 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -7,7 +7,6 @@ import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
 import { useInView } from "react-intersection-observer";
 import SourceItem from "./sourceItem";
 import pechaIcon from "@/assets/icon/pecha_icon.png";
-import { ScrollArea } from "@/components/ui/atoms/scroll-area";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
 import {
   searchSources,
@@ -155,7 +154,7 @@ const SelectedSourceDetail = ({
           </p>
         )}
 
-      <ScrollArea
+      <Pecha.ScrollArea
         type="scroll"
         className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
       >
@@ -192,7 +191,7 @@ const SelectedSourceDetail = ({
             </p>
           )}
         </div>
-      </ScrollArea>
+      </Pecha.ScrollArea>
     </div>
   );
 };
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index 67cec981..a3e4fb2d 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -1,6 +1,6 @@
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { highlightSearchMatch } from "@/lib/utils";
-import { ScrollArea } from "@/components/ui/atoms/scroll-area";
+import { Pecha } from "@/components/ui/shadimport";
 
 const SourceItem = ({ source, onSegment, searchQuery }: any) => {
   return (
@@ -11,7 +11,7 @@ const SourceItem = ({ source, onSegment, searchQuery }: any) => {
         </p>
         <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
       </div>
-      <ScrollArea type="scroll" className="flex-1 min-h-0 mt-3">
+      <Pecha.ScrollArea type="scroll" className="flex-1 min-h-0 mt-3">
         <div className="flex flex-col gap-2 px-2 pb-2">
           {source.segment_matches?.map((segment: any, index: number) => (
             <button
@@ -41,7 +41,7 @@ const SourceItem = ({ source, onSegment, searchQuery }: any) => {
             </button>
           ))}
         </div>
-      </ScrollArea>
+      </Pecha.ScrollArea>
     </div>
   );
 };
diff --git a/src/components/ui/shadimport.ts b/src/components/ui/shadimport.ts
index 4d9e0149..643055d2 100644
--- a/src/components/ui/shadimport.ts
+++ b/src/components/ui/shadimport.ts
@@ -47,6 +47,7 @@ import { Badge } from "@/components/ui/atoms/badge";
 import { Textarea } from "@/components/ui/atoms/textarea";
 import { Skeleton } from "@/components/ui/atoms/skeleton";
 import { Checkbox } from "@/components/ui/atoms/checkbox";
+import { ScrollArea } from "@/components/ui/atoms/scroll-area";
 
 import {
   Pagination,
@@ -134,4 +135,5 @@ export const Pecha = {
   Textarea,
   Skeleton,
   Checkbox,
+  ScrollArea,
 };

From 90d891b0fadcb525020c7b98cc65a5d433a0e6c7 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Mon, 20 Apr 2026 15:51:53 +0530
Subject: [PATCH 08/13] fixes

---
 .../webuddhist-source/SourceSelectorSheet.tsx | 13 ++--
 .../webuddhist-source/sourceItem.tsx          | 63 +++++++++----------
 2 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index b3cbbe5d..26997e25 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -227,7 +227,7 @@ export const SourceSelectorSheet = ({
           skip,
         }),
       refetchOnWindowFocus: false,
-      enabled: isOpen && !searchOnlyTitles,
+      enabled: isOpen && !searchOnlyTitles && debouncedSearchFilter.length > 0,
     },
   );
 
@@ -289,9 +289,12 @@ export const SourceSelectorSheet = ({
 
   const detailSegments = useMemo(() => {
     if (!detailsData?.pages) return [];
-    return detailsData.pages.flatMap((page) =>
+    const allSegments = detailsData.pages.flatMap((page) =>
       flattenSegments(page.content.sections),
     );
+    return Array.from(
+      new Map(allSegments.map((s: any) => [s.segment_id, s])).values()
+    );
   }, [detailsData?.pages]);
 
   const isLoading = searchOnlyTitles ? isTitleLoading : isMultilingualLoading;
@@ -432,11 +435,7 @@ export const SourceSelectorSheet = ({
           </label>
         </div>
         <div className="h-[calc(100vh-200px)] overflow-hidden flex flex-col">
-          <div
-            className={`px-4 pb-4 pt-2 ${
-              searchOnlyTitles ? "space-y-4" : "flex-1 min-h-0"
-            }`}
-          >
+          <div className="px-4 pb-4 pt-2 flex-1 min-h-0 overflow-y-auto space-y-4 [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
             {isLoading ? (
               <div className="w-full flex items-center justify-center h-full">
                 <p>Loading segments...</p>
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index a3e4fb2d..c7237cda 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -1,47 +1,44 @@
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { highlightSearchMatch } from "@/lib/utils";
-import { Pecha } from "@/components/ui/shadimport";
 
 const SourceItem = ({ source, onSegment, searchQuery }: any) => {
   return (
-    <div className="border rounded-md flex flex-col h-full overflow-hidden">
+    <div className="border rounded-md flex flex-col overflow-hidden">
       <div className="flex items-center justify-between p-2 pb-0">
         <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
           {source.text.title}
         </p>
         <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
       </div>
-      <Pecha.ScrollArea type="scroll" className="flex-1 min-h-0 mt-3">
-        <div className="flex flex-col gap-2 px-2 pb-2">
-          {source.segment_matches?.map((segment: any, index: number) => (
-            <button
-              key={segment.segment_id || index}
-              aria-label={`Select segment ${index + 1}`}
-              className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
-              onClick={() =>
-                onSegment?.({
-                  content: segment.content,
-                  pecha_segment_id: segment.pecha_segment_id,
-                  text_id: source.text.text_id,
-                  segment_ids: [segment.segment_id],
-                })
-              }
-            >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: searchQuery
-                    ? highlightSearchMatch(
-                        segment.content,
-                        searchQuery,
-                        "bg-yellow-300 px-0.5 text-black",
-                      )
-                    : segment.content,
-                }}
-              />
-            </button>
-          ))}
-        </div>
-      </Pecha.ScrollArea>
+      <div className="flex flex-col gap-2 px-2 pb-2 mt-3">
+        {source.segment_matches?.map((segment: any, index: number) => (
+          <button
+            key={segment.segment_id || index}
+            aria-label={`Select segment ${index + 1}`}
+            className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
+            onClick={() =>
+              onSegment?.({
+                content: segment.content,
+                pecha_segment_id: segment.pecha_segment_id,
+                text_id: source.text.text_id,
+                segment_ids: [segment.segment_id],
+              })
+            }
+          >
+            <div
+              dangerouslySetInnerHTML={{
+                __html: searchQuery
+                  ? highlightSearchMatch(
+                    segment.content,
+                    searchQuery,
+                    "bg-yellow-300 px-0.5 text-black",
+                  )
+                  : segment.content,
+              }}
+            />
+          </button>
+        ))}
+      </div>
     </div>
   );
 };

From 3da0384ceab5cab42b2e70002ae9a68391834e88 Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Mon, 20 Apr 2026 15:55:27 +0530
Subject: [PATCH 09/13] lint

---
 .../molecules/webuddhist-source/SourceSelectorSheet.tsx   | 2 +-
 .../ui/molecules/webuddhist-source/sourceItem.tsx         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 26997e25..4f3db93f 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -293,7 +293,7 @@ export const SourceSelectorSheet = ({
       flattenSegments(page.content.sections),
     );
     return Array.from(
-      new Map(allSegments.map((s: any) => [s.segment_id, s])).values()
+      new Map(allSegments.map((s: any) => [s.segment_id, s])).values(),
     );
   }, [detailsData?.pages]);
 
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index c7237cda..30c1466f 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -29,10 +29,10 @@ const SourceItem = ({ source, onSegment, searchQuery }: any) => {
               dangerouslySetInnerHTML={{
                 __html: searchQuery
                   ? highlightSearchMatch(
-                    segment.content,
-                    searchQuery,
-                    "bg-yellow-300 px-0.5 text-black",
-                  )
+                      segment.content,
+                      searchQuery,
+                      "bg-yellow-300 px-0.5 text-black",
+                    )
                   : segment.content,
               }}
             />

From 04ddc60ae32aa38e05b181a613276425ba5565ba Mon Sep 17 00:00:00 2001
From: Tech-lo <taylorhent@gmail.com>
Date: Mon, 20 Apr 2026 16:50:28 +0530
Subject: [PATCH 10/13] minor style

---
 .../ui/molecules/webuddhist-source/SourceSelectorSheet.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 4f3db93f..78645bb4 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -110,11 +110,13 @@ const SelectedSourceDetail = ({
   return (
     <div className="mt-3 space-y-3">
       <div className="flex items-center justify-between">
-        <span className="text-sm text-gray-600 dark:text-[#b1b1b1]">
+        <span className="text-sm text-muted-foreground">
           Select Range (e.g. 1-{segmentCount})
         </span>
         <label className="flex items-center gap-1.5 cursor-pointer">
-          <span className="text-sm text-gray-600 dark:text-[#b1b1b1]">
+          <span
+            className={`text-sm select-none${selectAll ? "" : " text-muted-foreground"}`}
+          >
             Select All
           </span>
           <Pecha.Checkbox

From 08862e943f8386206cb71c05e155a1b3837c0ba2 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 20 Apr 2026 13:58:45 +0200
Subject: [PATCH 11/13] type consise

---
 src/components/api/searchApi.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/api/searchApi.ts b/src/components/api/searchApi.ts
index 4694d9b2..0bc4d4a3 100644
--- a/src/components/api/searchApi.ts
+++ b/src/components/api/searchApi.ts
@@ -6,6 +6,19 @@ type SearchCommon = {
   skip?: number;
 };
 
+type SearchTitle = {
+  title: string;
+  limit?: number;
+  offset?: number;
+};
+
+type SearchTextDetails = {
+  textId: string;
+  contentId?: string;
+  segmentId?: string;
+  direction?: "next" | "previous";
+  size?: number;
+};
 export const searchSources = async ({
   query,
   limit = 10,
@@ -26,11 +39,7 @@ export const searchTitles = async ({
   title,
   limit = 20,
   offset = 0,
-}: {
-  title: string;
-  limit?: number;
-  offset?: number;
-}) => {
+}: SearchTitle) => {
   const { data } = await axiosInstance.get(`/api/v1/texts/title-search`, {
     params: {
       title,
@@ -47,13 +56,7 @@ export const fetchTextDetails = async ({
   segmentId,
   direction = "next",
   size = 20,
-}: {
-  textId: string;
-  contentId?: string;
-  segmentId?: string;
-  direction?: "next" | "previous";
-  size?: number;
-}) => {
+}: SearchTextDetails) => {
   const { data } = await axiosInstance.post(`/api/v1/texts/${textId}/details`, {
     ...(contentId && { content_id: contentId }),
     ...(segmentId && { segment_id: segmentId }),

From e80ccfc9b125018eb78186134d2f6762c89bb050 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 20 Apr 2026 14:20:22 +0200
Subject: [PATCH 12/13] modularize

---
 .../webuddhist-source/SourceDetail.tsx        | 155 +++++++++++++++
 .../webuddhist-source/SourceSelectorSheet.tsx | 186 +-----------------
 src/lib/constant.ts                           |   3 +
 src/lib/utils.ts                              |  28 +++
 4 files changed, 191 insertions(+), 181 deletions(-)
 create mode 100644 src/components/ui/molecules/webuddhist-source/SourceDetail.tsx

diff --git a/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx b/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx
new file mode 100644
index 00000000..b6d84c5f
--- /dev/null
+++ b/src/components/ui/molecules/webuddhist-source/SourceDetail.tsx
@@ -0,0 +1,155 @@
+import { useMemo, useState } from "react";
+import { Pecha } from "@/components/ui/shadimport";
+import { parseSelection } from "@/lib/utils";
+
+export interface SourceData {
+  content: string;
+  pecha_segment_id: string;
+  text_id: string;
+  segment_ids: string[];
+}
+
+const SelectedSourceDetail = ({
+  segments,
+  selectedSource,
+  onAdd,
+  bottomRef,
+  isFetchingNextPage,
+}: {
+  segments: any[];
+  selectedSource: any;
+  onAdd: (sourceData: SourceData) => void;
+  bottomRef?: (node?: Element | null) => void;
+  isFetchingNextPage?: boolean;
+}) => {
+  const [rangeInput, setRangeInput] = useState("");
+  const [selectAll, setSelectAll] = useState(false);
+
+  const segmentCount = segments.length;
+
+  const selectedIndices = useMemo(() => {
+    if (!segmentCount) return null;
+    return parseSelection(rangeInput, segmentCount);
+  }, [rangeInput, segmentCount]);
+
+  const isAddDisabled = !selectedIndices;
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAll(checked);
+    if (checked && segmentCount > 0) {
+      setRangeInput(`1-${segmentCount}`);
+    } else {
+      setRangeInput("");
+    }
+  };
+
+  const handleAdd = () => {
+    if (!selectedIndices || !selectedSource) return;
+    const sortedIndices = Array.from(selectedIndices).sort((a, b) => a - b);
+    const selected = sortedIndices.map((i) => segments[i - 1]).filter(Boolean);
+    const content = selected.map((seg: any) => seg.content).join("\n");
+    const segmentIds = selected.map((seg: any) => seg.segment_id);
+    const pechaSegmentId = selected[0]?.pecha_segment_id || "";
+
+    const textId = selectedSource.id;
+
+    onAdd({
+      content,
+      pecha_segment_id: pechaSegmentId,
+      text_id: textId,
+      segment_ids: segmentIds,
+    });
+  };
+
+  return (
+    <div className="mt-3 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-muted-foreground">
+          Select Range (e.g. 1-{segmentCount})
+        </span>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <span
+            className={`text-sm select-none${selectAll ? "" : " text-muted-foreground"}`}
+          >
+            Select All
+          </span>
+          <Pecha.Checkbox
+            checked={selectAll}
+            onCheckedChange={(checked: boolean) => handleSelectAll(!!checked)}
+            className="data-[state=checked]:bg-transparent dark:data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
+          />
+        </label>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Pecha.Input
+          placeholder="1-10"
+          value={rangeInput}
+          onChange={(e) => {
+            setRangeInput(e.target.value);
+            setSelectAll(false);
+          }}
+          className={`flex-1 h-10 ${rangeInput.trim() !== "" && !rangeInput.trim().endsWith("-") && !selectedIndices ? "ring-1 ring-red-500 dark:ring-red-400" : ""}`}
+        />
+        <Pecha.Button
+          type="button"
+          variant="destructive"
+          disabled={isAddDisabled}
+          onClick={handleAdd}
+          className="h-10 px-6 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Add
+        </Pecha.Button>
+      </div>
+
+      {rangeInput.trim() !== "" &&
+        !rangeInput.trim().endsWith("-") &&
+        !selectedIndices && (
+          <p className="text-xs text-red-500 dark:text-red-400 -mt-1">
+            Enter a single number (e.g. 3) or a range (e.g. 1-10)
+          </p>
+        )}
+
+      <Pecha.ScrollArea
+        type="scroll"
+        className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
+      >
+        <div className="p-4 space-y-4">
+          {segments.map((segment: any, segIndex: number) => {
+            const isSelected = selectedIndices?.has(segIndex + 1);
+            return (
+              <div
+                key={segment.segment_id || segIndex}
+                className={`border p-3 rounded-[10px] text-sm transition-colors bg-[#F9F9F9] dark:bg-sidebar-secondary  ${
+                  isSelected
+                    ? "border-solid border-foreground dark:border-foreground"
+                    : "dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
+                }`}
+              >
+                <span className="font-medium">{segIndex + 1}. </span>
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: segment.content,
+                  }}
+                />
+              </div>
+            );
+          })}
+          {bottomRef && (
+            <div
+              ref={bottomRef}
+              className="h-5 w-full opacity-0 pointer-events-none"
+            />
+          )}
+          {isFetchingNextPage && (
+            <p className="text-center text-sm text-gray-500">
+              Loading more segments...
+            </p>
+          )}
+        </div>
+      </Pecha.ScrollArea>
+    </div>
+  );
+};
+
+export default SelectedSourceDetail;
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 78645bb4..86ff9df9 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -8,19 +8,14 @@ import { useInView } from "react-intersection-observer";
 import SourceItem from "./sourceItem";
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import SelectedSourceDetail from "./SourceDetail";
 import {
   searchSources,
   searchTitles,
   fetchTextDetails,
 } from "@/components/api/searchApi";
 import { flattenSegments, getLastSegmentId } from "@/lib/utils";
-
-interface SourceData {
-  content: string;
-  pecha_segment_id: string;
-  text_id: string;
-  segment_ids: string[];
-}
+import type { SourceData } from "./SourceDetail";
 
 interface SourceSelectorSheetProps {
   isOpen: boolean;
@@ -28,176 +23,6 @@ interface SourceSelectorSheetProps {
   onAddSource: (sourceData: SourceData) => void;
 }
 
-const RANGE_REGEX = /^(\d+)\s*-\s*(\d+)$/;
-const SINGLE_REGEX = /^(\d+)$/;
-
-const parseSelection = (input: string, max: number): Set<number> | null => {
-  const trimmed = input.trim();
-  if (!trimmed) return null;
-
-  const rangeMatch = RANGE_REGEX.exec(trimmed);
-  if (rangeMatch) {
-    const start = Number.parseInt(rangeMatch[1], 10);
-    const end = Number.parseInt(rangeMatch[2], 10);
-    if (start < 1 || end < start || start > max) return null;
-    const selected = new Set<number>();
-    for (let i = start; i <= Math.min(end, max); i++) selected.add(i);
-    return selected;
-  }
-
-  const singleMatch = SINGLE_REGEX.exec(trimmed);
-  if (singleMatch) {
-    const num = Number.parseInt(singleMatch[1], 10);
-    if (num < 1 || num > max) return null;
-    return new Set([num]);
-  }
-
-  return null;
-};
-
-const SelectedSourceDetail = ({
-  segments,
-  selectedSource,
-  onAdd,
-  bottomRef,
-  isFetchingNextPage,
-}: {
-  segments: any[];
-  selectedSource: any;
-  onAdd: (sourceData: SourceData) => void;
-  bottomRef?: (node?: Element | null) => void;
-  isFetchingNextPage?: boolean;
-}) => {
-  const [rangeInput, setRangeInput] = useState("");
-  const [selectAll, setSelectAll] = useState(false);
-
-  const segmentCount = segments.length;
-
-  const selectedIndices = useMemo(() => {
-    if (!segmentCount) return null;
-    return parseSelection(rangeInput, segmentCount);
-  }, [rangeInput, segmentCount]);
-
-  const isAddDisabled = !selectedIndices;
-
-  const handleSelectAll = (checked: boolean) => {
-    setSelectAll(checked);
-    if (checked && segmentCount > 0) {
-      setRangeInput(`1-${segmentCount}`);
-    } else {
-      setRangeInput("");
-    }
-  };
-
-  const handleAdd = () => {
-    if (!selectedIndices || !selectedSource) return;
-    const sortedIndices = Array.from(selectedIndices).sort((a, b) => a - b);
-    const selected = sortedIndices.map((i) => segments[i - 1]).filter(Boolean);
-    const content = selected.map((seg: any) => seg.content).join("\n");
-    const segmentIds = selected.map((seg: any) => seg.segment_id);
-    const pechaSegmentId = selected[0]?.pecha_segment_id || "";
-
-    const textId = selectedSource.id;
-
-    onAdd({
-      content,
-      pecha_segment_id: pechaSegmentId,
-      text_id: textId,
-      segment_ids: segmentIds,
-    });
-  };
-
-  return (
-    <div className="mt-3 space-y-3">
-      <div className="flex items-center justify-between">
-        <span className="text-sm text-muted-foreground">
-          Select Range (e.g. 1-{segmentCount})
-        </span>
-        <label className="flex items-center gap-1.5 cursor-pointer">
-          <span
-            className={`text-sm select-none${selectAll ? "" : " text-muted-foreground"}`}
-          >
-            Select All
-          </span>
-          <Pecha.Checkbox
-            checked={selectAll}
-            onCheckedChange={(checked: boolean) => handleSelectAll(!!checked)}
-            className="data-[state=checked]:bg-transparent dark:data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
-          />
-        </label>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <Pecha.Input
-          placeholder="1-10"
-          value={rangeInput}
-          onChange={(e) => {
-            setRangeInput(e.target.value);
-            setSelectAll(false);
-          }}
-          className={`flex-1 h-10 ${rangeInput.trim() !== "" && !rangeInput.trim().endsWith("-") && !selectedIndices ? "ring-1 ring-red-500 dark:ring-red-400" : ""}`}
-        />
-        <Pecha.Button
-          type="button"
-          variant="destructive"
-          disabled={isAddDisabled}
-          onClick={handleAdd}
-          className="h-10 px-6 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          Add
-        </Pecha.Button>
-      </div>
-
-      {rangeInput.trim() !== "" &&
-        !rangeInput.trim().endsWith("-") &&
-        !selectedIndices && (
-          <p className="text-xs text-red-500 dark:text-red-400 -mt-1">
-            Enter a single number (e.g. 3) or a range (e.g. 1-10)
-          </p>
-        )}
-
-      <Pecha.ScrollArea
-        type="scroll"
-        className="border border-[#DEDEDE] dark:border-[#313132] rounded-[10px] h-[calc(100vh-380px)]"
-      >
-        <div className="p-4 space-y-4">
-          {segments.map((segment: any, segIndex: number) => {
-            const isSelected = selectedIndices?.has(segIndex + 1);
-            return (
-              <div
-                key={segment.segment_id || segIndex}
-                className={`border p-3 rounded-[10px] text-sm transition-colors ${
-                  isSelected
-                    ? "bg-[#F9F9F9] dark:bg-sidebar-secondary border-solid border-foreground dark:border-foreground"
-                    : "bg-[#F9F9F9] dark:bg-sidebar-secondary border-dashed border-[#E1E1E1] dark:border-[#313132]"
-                }`}
-              >
-                <span className="font-medium">{segIndex + 1}. </span>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: segment.content,
-                  }}
-                />
-              </div>
-            );
-          })}
-          {bottomRef && (
-            <div
-              ref={bottomRef}
-              className="h-5 w-full opacity-0 pointer-events-none"
-            />
-          )}
-          {isFetchingNextPage && (
-            <p className="text-center text-sm text-gray-500">
-              Loading more segments...
-            </p>
-          )}
-        </div>
-      </Pecha.ScrollArea>
-    </div>
-  );
-};
-
 export const SourceSelectorSheet = ({
   isOpen,
   onOpenChange,
@@ -208,6 +33,7 @@ export const SourceSelectorSheet = ({
   const [pagination, setPagination] = useState({ currentPage: 1, limit: 10 });
   const [searchOnlyTitles, setSearchOnlyTitles] = useState(true);
   const [selectedSource, setSelectedSource] = useState<any>(null);
+  const { t } = useTranslate();
 
   const skip = useMemo(
     () => (pagination.currentPage - 1) * pagination.limit,
@@ -315,7 +141,6 @@ export const SourceSelectorSheet = ({
   const handlePageChange = (pageNumber: number) => {
     setPagination((prev) => ({ ...prev, currentPage: pageNumber }));
   };
-  const { t } = useTranslate();
 
   const handleAddSource = (sourceData: SourceData) => {
     if (sourceData?.content) {
@@ -354,11 +179,10 @@ export const SourceSelectorSheet = ({
             return (
               <div key={source.id || index}>
                 <button
-                  className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${
-                    isSelected
+                  className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${isSelected
                       ? "border-[#801A1E] dark:border-[#801A1E]"
                       : "border-gray-300 dark:border-[#313132]"
-                  }`}
+                    }`}
                   onClick={() => handleTitleClick(source)}
                 >
                   <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">
diff --git a/src/lib/constant.ts b/src/lib/constant.ts
index 91030678..31f20f81 100644
--- a/src/lib/constant.ts
+++ b/src/lib/constant.ts
@@ -34,6 +34,9 @@ export const PLATFORM_PATTERNS: Record<string, RegExp> = {
   instagram: /instagram\.com/i,
   tiktok: /tiktok\.com/i,
 };
+export const RANGE_REGEX = /^(\d+)\s*-\s*(\d+)$/;
+export const SINGLE_REGEX = /^(\d+)$/;
+
 export const TIBETAN_LETTERS = [
   "ཀ",
   "ཁ",
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ae2f679c..6edecb70 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -10,6 +10,7 @@ import {
   FaInstagram,
   FaTiktok,
 } from "react-icons/fa";
+import { RANGE_REGEX, SINGLE_REGEX } from "./constant";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -179,3 +180,30 @@ export const flattenSegments = (sections: any[]): any[] => {
   }
   return result;
 };
+
+export const parseSelection = (
+  input: string,
+  max: number,
+): Set<number> | null => {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+
+  const rangeMatch = RANGE_REGEX.exec(trimmed);
+  if (rangeMatch) {
+    const start = Number.parseInt(rangeMatch[1], 10);
+    const end = Number.parseInt(rangeMatch[2], 10);
+    if (start < 1 || end < start || start > max) return null;
+    const selected = new Set<number>();
+    for (let i = start; i <= Math.min(end, max); i++) selected.add(i);
+    return selected;
+  }
+
+  const singleMatch = SINGLE_REGEX.exec(trimmed);
+  if (singleMatch) {
+    const num = Number.parseInt(singleMatch[1], 10);
+    if (num < 1 || num > max) return null;
+    return new Set([num]);
+  }
+
+  return null;
+};

From 9bf53a84508a36706ce79efff34cb480b720013a Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 20 Apr 2026 14:21:39 +0200
Subject: [PATCH 13/13] lint

---
 .../ui/molecules/webuddhist-source/SourceSelectorSheet.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index 86ff9df9..3961af90 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -179,10 +179,11 @@ export const SourceSelectorSheet = ({
             return (
               <div key={source.id || index}>
                 <button
-                  className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${isSelected
+                  className={`border p-3 rounded-md text-left w-full flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-input/50 ${
+                    isSelected
                       ? "border-[#801A1E] dark:border-[#801A1E]"
                       : "border-gray-300 dark:border-[#313132]"
-                    }`}
+                  }`}
                   onClick={() => handleTitleClick(source)}
                 >
                   <p className="font-bold text-[#801A1E] dark:text-[#b0b0b0]">