@vishu1301/script-writing 1.1.5 → 1.1.7

package/dist/index.d.cts

@@ -120,12 +120,12 @@ declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, scene
     isSummarizing?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useScriptBreakdownScene(sceneNumber: string): {
-    scene: ScriptBreakdown | undefined;
+declare function useScriptBreakdownScene(scene_url: string, fetchOptions?: RequestInit, onAISummarize?: (scene: any) => void, onTagAdded?: (tag: Tag) => void, onTagRemoved?: (tagId: string) => void, preLoadedTags?: Tag[]): {
+    scene: any;
     blocks: Block[];
     characters: string[];
     isLoading: boolean;
-    error: Error | null;
+    error: boolean;
     tags: Tag[];
     selectionMenu: {
         blockId: string;
@@ -136,10 +136,10 @@ declare function useScriptBreakdownScene(sceneNumber: string): {
         left: number;
     } | null;
     handleMouseUp: () => void;
-    addTag: (categoryId: ElementCategory) => void;
-    removeTag: (e: React.MouseEvent, id: string) => void;
+    addTag: (categoryId: ElementCategory) => Promise<void>;
+    removeTag: (e: React.MouseEvent, id: string) => Promise<void>;
     clearSelection: () => void;
-    menuPlacement: "top" | "bottom";
+    menuPlacement: "bottom" | "top";
     menuRef: React$1.RefObject<HTMLDivElement | null>;
     subLocations: string[];
     addSubLocation: (subLocation: string) => void;

package/dist/index.d.ts

@@ -120,12 +120,12 @@ declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, scene
     isSummarizing?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useScriptBreakdownScene(sceneNumber: string): {
-    scene: ScriptBreakdown | undefined;
+declare function useScriptBreakdownScene(scene_url: string, fetchOptions?: RequestInit, onAISummarize?: (scene: any) => void, onTagAdded?: (tag: Tag) => void, onTagRemoved?: (tagId: string) => void, preLoadedTags?: Tag[]): {
+    scene: any;
     blocks: Block[];
     characters: string[];
     isLoading: boolean;
-    error: Error | null;
+    error: boolean;
     tags: Tag[];
     selectionMenu: {
         blockId: string;
@@ -136,10 +136,10 @@ declare function useScriptBreakdownScene(sceneNumber: string): {
         left: number;
     } | null;
     handleMouseUp: () => void;
-    addTag: (categoryId: ElementCategory) => void;
-    removeTag: (e: React.MouseEvent, id: string) => void;
+    addTag: (categoryId: ElementCategory) => Promise<void>;
+    removeTag: (e: React.MouseEvent, id: string) => Promise<void>;
     clearSelection: () => void;
-    menuPlacement: "top" | "bottom";
+    menuPlacement: "bottom" | "top";
     menuRef: React$1.RefObject<HTMLDivElement | null>;
     subLocations: string[];
     addSubLocation: (subLocation: string) => void;

package/dist/index.js

@@ -1730,6 +1730,166 @@ var CATEGORIES = [
   { id: "LOCATION", label: "Location", color: "#FFB300", hex: "#FFE082" },
   { id: "OTHER", label: "Other", color: "#9E9E9E", hex: "#E0E0E0" }
 ];
+var PopcornIcon = ({ isSummarizing }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: `w-6 h-6 transition-all duration-500 ${isSummarizing ? "animate-cook" : "group-hover:scale-110 group-hover:-rotate-12"}`,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4",
+          className: "stroke-yellow-400",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ jsxs("g", { className: "stroke-red-500", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx("path", { d: "M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 22 9 8", className: "stroke-red-500", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("path", { d: "m14 22 1-14", className: "stroke-red-500", strokeWidth: "1" })
+      ] })
+    ]
+  }
+);
+var SummarizeButton = ({
+  onSummarize,
+  isSummarizing
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onSummarize,
+      disabled: isSummarizing,
+      className: `group relative w-full py-4 px-8 rounded-[3rem] transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] border ${isSummarizing ? "bg-zinc-100 border-zinc-300 opacity-100 cursor-wait shadow-inner" : "bg-gradient-to-b from-white via-zinc-50 to-zinc-100 border-white/70 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.8)] hover:shadow-[0_20px_50px_-15px_rgba(139,92,246,0.3)] hover:-translate-y-[2px] active:scale-[0.98]"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-700", children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-[conic-gradient(from_0deg_at_50%_50%,#c084fc,transparent_60%,#fb7185,transparent_90%)] blur-3xl opacity-20 animate-[spin_10s_linear_infinite]" }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `absolute inset-0 transition-opacity duration-700 bg-[radial-gradient(circle_at_50%_50%,rgba(139,92,246,0.1),transparent_70%)] ${isSummarizing ? "opacity-100" : "opacity-0"}`
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center gap-4", children: [
+          /* @__PURE__ */ jsx("style", { children: `
+          @keyframes kernel-pop {
+            0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
+            10% { opacity: 1; transform: translate(var(--tx1), var(--ty1)) scale(1.3) rotate(45deg); }
+            40% { transform: translate(var(--tx2), var(--ty2)) scale(1) rotate(180deg); opacity: 1; }
+            100% { transform: translate(var(--tx3), var(--ty3)) scale(0.4) rotate(360deg); opacity: 0; }
+          }
+          @keyframes icon-cook {
+            0%, 100% { transform: scale(1.1) translateY(0); }
+            50% { transform: scale(0.9, 1.1) translateY(-3px) rotate(3deg); }
+          }
+          .animate-kernel { 
+            animation: kernel-pop var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+            animation-delay: var(--delay);
+            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); /* Added shadow for visibility */
+          }
+          .animate-cook { animation: icon-cook 0.3s ease-in-out infinite; }
+        ` }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx(PopcornIcon, { isSummarizing }),
+            isSummarizing && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "animate-kernel absolute w-4 h-4",
+                  style: {
+                    "--dur": "1.2s",
+                    "--delay": "0s",
+                    "--tx1": "-18px",
+                    "--ty1": "-22px",
+                    "--tx2": "-28px",
+                    "--ty2": "-28px",
+                    "--tx3": "-38px",
+                    "--ty3": "12px"
+                  },
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M12 2a4 4 0 0 0-4 4 4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4-4z",
+                      fill: "#FBBF24",
+                      stroke: "#F59E0B",
+                      strokeWidth: "0.5"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "animate-kernel absolute w-3.5 h-3.5",
+                  style: {
+                    "--dur": "1.5s",
+                    "--delay": "0.3s",
+                    "--tx1": "18px",
+                    "--ty1": "-28px",
+                    "--tx2": "28px",
+                    "--ty2": "-38px",
+                    "--tx3": "38px",
+                    "--ty3": "18px"
+                  },
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M12 3c-2 0-3 1-4 2-1-1-3-1-4 1-1 2 0 4 1 5-1 1-1 3 1 4 2 1 4 0 6-1 2 1 4 2 6 1 2-1 2-3 1-4 1-1 2-3 1-5-1-2-3-2-4-1-1-1-2-2-4-2z",
+                      fill: "#FDE68A",
+                      stroke: "#FBBF24",
+                      strokeWidth: "0.5"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "animate-kernel absolute w-4 h-4",
+                  style: {
+                    "--dur": "1.8s",
+                    "--delay": "0.7s",
+                    "--tx1": "-2px",
+                    "--ty1": "-28px",
+                    "--tx2": "5px",
+                    "--ty2": "-48px",
+                    "--tx3": "10px",
+                    "--ty3": "18px"
+                  },
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M12 2a4 4 0 0 0-4 4 4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4-4z",
+                      fill: "#FEF3C7"
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-[12px] font-bold tracking-[0.25em] uppercase transition-all duration-300 ${isSummarizing ? "text-violet-700" : "text-zinc-500 group-hover:text-zinc-900"}`,
+              children: isSummarizing ? "Summarizing..." : "Summarize Scene"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/40 to-transparent" })
+      ]
+    }
+  );
+};
+var summarize_button_default = SummarizeButton;
 function ScriptBreakdownSceneView({
   blocks,
   characters,
@@ -1975,7 +2135,7 @@ function ScriptBreakdownSceneView({
             value: sceneBrief,
             onChange: (e) => setSceneBrief(e.target.value),
             placeholder: "Write a brief description or notes for this scene...",
-            className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans",
+            className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans select-none",
             style: {
               lineHeight: "1.6"
             }
@@ -1983,27 +2143,15 @@ function ScriptBreakdownSceneView({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
+    /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-6 sticky top-6", children: [
+      /* @__PURE__ */ jsx(
+        summarize_button_default,
         {
-          onClick: onSummarize,
-          disabled: isSummarizing,
-          className: `group relative w-full py-4 px-6 rounded-[3rem] overflow-hidden bg-gradient-to-b from-white via-zinc-50 to-zinc-100 border border-white/70 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.9)] transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isSummarizing ? "opacity-70 cursor-wait" : "hover:shadow-[0_20px_50px_-15px_rgba(139,92,246,0.35)] hover:-translate-y-[2px] active:scale-[0.97]"}`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-700", children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-[conic-gradient(from_180deg_at_50%_50%,#8b5cf6,transparent_40%,#d946ef,transparent_70%)] blur-2xl opacity-30 animate-[spin_6s_linear_infinite]" }) }),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-500 bg-[radial-gradient(circle_at_50%_40%,rgba(139,92,246,0.18),transparent_70%)]" }),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-[1px] rounded-[inherit] bg-gradient-to-b from-white/90 to-transparent pointer-events-none" }),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "absolute -left-[100%] top-0 h-full w-[60%] bg-gradient-to-r from-transparent via-white/60 to-transparent skew-x-[-20deg] group-hover:left-[120%] transition-all duration-[1200ms]" }) }),
-            /* @__PURE__ */ jsx("span", { className: "absolute inset-[2px] rounded-[inherit] opacity-0 group-hover:opacity-100 bg-gradient-to-r from-violet-200/40 via-white/40 to-fuchsia-200/40 blur-md transition duration-500" }),
-            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center gap-3", children: [
-              isSummarizing ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 text-violet-500 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 text-violet-500 transition-all duration-500 group-hover:-rotate-12 group-hover:scale-125" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold tracking-[0.32em] uppercase text-zinc-800 group-hover:text-zinc-950 transition-all duration-300", children: isSummarizing ? "Summarizing..." : "Summarize Scene" })
-            ] })
-          ]
+          isSummarizing,
+          onSummarize
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8 w-full", children: [
         /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white/80 shadow-[0_4px_15px_rgb(0,0,0,0.04)] border border-white", children: /* @__PURE__ */ jsx(Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
           "Tags",
@@ -2115,96 +2263,39 @@ function ScriptBreakdownSceneView({
     ] })
   ] }) });
 }
-function useScriptBreakdown({
-  scenes
-}) {
-  const [parsedScenes, setParsedScenes] = useState(scenes || []);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [hasFetchedFallback, setHasFetchedFallback] = useState(false);
-  useEffect(() => {
-    if (scenes && scenes.length > 0) {
-      setParsedScenes(scenes);
-      return;
-    }
-    if (hasFetchedFallback) return;
-    const fetchFallback = async () => {
-      setIsLoading(true);
-      setHasFetchedFallback(true);
-      try {
-        const response = await fetch(
-          "https://pub-4c2073ce6f434c4e92ed33f8e1c7f9ea.r2.dev/screenplay%20(1).sbx"
-        );
-        if (!response.ok) {
-          throw new Error(
-            `Failed to fetch fallback script: ${response.status}`
-          );
-        }
-        let text = await response.text();
-        if (text.includes("<div")) {
-          const textarea = document.createElement("textarea");
-          textarea.innerHTML = text;
-          text = textarea.value;
-        }
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(text, "text/html");
-        const divs = Array.from(doc.querySelectorAll("div"));
-        const extractedScenes = [];
-        let currentSceneNumber = "1";
-        let currentContent = "";
-        let hasSeenFirstSceneHeading = false;
-        divs.forEach((div) => {
-          var _a;
-          const isSceneHeading = div.classList.contains("divtype0");
-          const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
-          if (!divText) return;
-          if (isSceneHeading) {
-            if (hasSeenFirstSceneHeading) {
-              extractedScenes.push({
-                scene_number: currentSceneNumber,
-                content: currentContent.trim()
-              });
-              currentContent = "";
-            }
-            hasSeenFirstSceneHeading = true;
-            currentSceneNumber = div.getAttribute("data-scene") || String(extractedScenes.length + 1);
-          }
-          currentContent += div.outerHTML + "\n";
-        });
-        if (currentContent.trim()) {
-          extractedScenes.push({
-            scene_number: currentSceneNumber,
-            content: currentContent.trim()
-          });
-        }
-        setParsedScenes(extractedScenes);
-      } catch (err) {
-        console.error("Error fetching fallback script:", err);
-        setError(err instanceof Error ? err : new Error("Unknown error"));
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchFallback();
-  }, [scenes, hasFetchedFallback]);
-  return { scenes: parsedScenes, isLoading, error };
-}
-var use_script_breakdown_default = useScriptBreakdown;
-
-// app/hook/use-script-breakdown-scene.ts
-function useScriptBreakdownScene(sceneNumber) {
-  const { scenes, isLoading, error } = use_script_breakdown_default({ scenes: [] });
-  const [tags, setTags] = useState([]);
+function useScriptBreakdownScene(scene_url, fetchOptions, onAISummarize, onTagAdded, onTagRemoved, preLoadedTags) {
+  const [tags, setTags] = useState(preLoadedTags || []);
   const [selectionMenu, setSelectionMenu] = useState(null);
   const autoTaggedSceneRef = useRef(null);
+  const [scene, setScene] = useState(null);
   const [menuPlacement, setMenuPlacement] = useState("top");
   const [subLocations, setSubLocations] = useState([]);
   const [sceneBrief, setSceneBrief] = useState("");
   const [isSummarizing, setIsSummarizing] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
   const menuRef = useRef(null);
-  const scene = useMemo(() => {
-    return scenes.find((s) => s.scene_number === sceneNumber);
-  }, [scenes, sceneNumber]);
+  useEffect(() => {
+    setIsLoading(true);
+    const fetchScene = async () => {
+      try {
+        const response = await fetch(scene_url, fetchOptions);
+        if (response.ok) {
+          const text = await response.text();
+          setScene({ content: text });
+        } else {
+          console.error("Failed to fetch scene:", response);
+          setError(true);
+        }
+        setIsLoading(false);
+      } catch (error2) {
+        setError(true);
+        setIsLoading(false);
+        console.error("Error fetching scene:", error2);
+      }
+    };
+    fetchScene();
+  }, []);
   const blocks = useMemo(() => {
     if (!scene || !scene.content) return [];
     const parser = new DOMParser();
@@ -2246,24 +2337,15 @@ function useScriptBreakdownScene(sceneNumber) {
   }, [blocks]);
   const handleAISummarize = async () => {
     setIsSummarizing(true);
-    const res = await fetch(
-      "https://nonfibrous-extrafloral-verlene.ngrok-free.dev/extract",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "ngrok-skip-browser-warning": "true"
-        },
-        body: JSON.stringify({
-          script: (scene == null ? void 0 : scene.content) || ""
-        })
-      }
-    );
+    const res = await (onAISummarize == null ? void 0 : onAISummarize(scene.content));
     if (res.ok) {
       const data = await res.json();
       setIsSummarizing(false);
-      const parsedData = JSON.parse(data.data) || [];
-      console.log("AI Tags:", parsedData);
+      const normalData = JSON.parse(data.data);
+      const parsedData = Array.isArray(normalData) ? normalData[0] : [];
+      const summary = Array.isArray(normalData) ? normalData[1] : "";
+      const parsedSummaryData = summary[0];
+      setSceneBrief(parsedSummaryData.summarise);
       const newTags = [];
       parsedData.forEach((aiTag) => {
         if (!aiTag.block_id || !aiTag.category_id || typeof aiTag.start_index !== "number" || typeof aiTag.end_index !== "number") {
@@ -2312,9 +2394,9 @@ function useScriptBreakdownScene(sceneNumber) {
     setSubLocations([]);
     setSceneBrief("");
     autoTaggedSceneRef.current = null;
-  }, [sceneNumber]);
+  }, [scene_url]);
   useEffect(() => {
-    if (blocks.length > 0 && characters.length > 0 && autoTaggedSceneRef.current !== sceneNumber) {
+    if (blocks.length > 0 && characters.length > 0 && autoTaggedSceneRef.current !== scene) {
       const autoTags = [];
       const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
       const sortedChars = [...characters].sort((a, b) => b.length - a.length);
@@ -2344,9 +2426,9 @@ function useScriptBreakdownScene(sceneNumber) {
         });
       });
       setTags(autoTags);
-      autoTaggedSceneRef.current = sceneNumber;
+      autoTaggedSceneRef.current = scene;
     }
-  }, [blocks, characters, sceneNumber]);
+  }, [blocks, characters, scene]);
   const clearSelection = useCallback(() => {
     var _a;
     setSelectionMenu(null);
@@ -2433,7 +2515,7 @@ function useScriptBreakdownScene(sceneNumber) {
       });
     }
   };
-  const addTag = (categoryId) => {
+  const addTag = async (categoryId) => {
     if (!selectionMenu) return;
     const newTag = {
       id: uuid(),
@@ -2450,12 +2532,26 @@ function useScriptBreakdownScene(sceneNumber) {
       return [...filtered, newTag];
     });
     clearSelection();
+    try {
+      await (onTagAdded == null ? void 0 : onTagAdded(newTag));
+    } catch (error2) {
+      console.error("Failed to add tag:", error2);
+      setTags((prev) => prev.filter((t) => t.id !== newTag.id));
+    }
   };
-  const removeTag = (e, id) => {
+  const removeTag = async (e, id) => {
     e.stopPropagation();
     e.preventDefault();
+    const tagToRemove = tags.find((t) => t.id === id);
+    if (!tagToRemove) return;
     setTags((prev) => prev.filter((t) => t.id !== id));
     clearSelection();
+    try {
+      await (onTagRemoved == null ? void 0 : onTagRemoved(id));
+    } catch (error2) {
+      console.error("Failed to remove tag:", error2);
+      setTags((prev) => [...prev, tagToRemove]);
+    }
   };
   return {
     scene,