@vishu1301/script-writing 1.2.1 → 1.2.3

package/dist/index.cjs

@@ -1753,6 +1753,7 @@ var CATEGORIES = [
   { id: "SET_PROP", label: "Set Prop", color: "#00C853", hex: "#69F0AE" },
   { id: "EXTRA", label: "Extra", color: "#00B8D4", hex: "#62EFFF" },
   { id: "LOCATION", label: "Location", color: "#FFB300", hex: "#FFE082" },
+  { id: "SUBLOCATION", label: "Sublocation", color: "#004CFF", hex: "#004CFF" },
   { id: "OTHER", label: "Other", color: "#9E9E9E", hex: "#E0E0E0" }
 ];
 var PopcornIcon = ({ isSummarizing }) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1940,31 +1941,17 @@ function ScriptBreakdownSceneView({
   selectionMenu,
   handleMouseUp,
   addTag,
+  updateTag,
   removeTag,
   clearSelection,
   menuPlacement,
   menuRef,
-  subLocations,
-  addSubLocation,
-  removeSubLocation,
   sceneBrief,
   setSceneBrief,
   onSummarize,
   isSummarizing
 }) {
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  const [isSubLocOpen, setIsSubLocOpen] = react.useState(false);
-  const [subLocInput, setSubLocInput] = react.useState("");
-  const subLocPopoverRef = react.useRef(null);
-  react.useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (isSubLocOpen && subLocPopoverRef.current && !subLocPopoverRef.current.contains(e.target)) {
-        setIsSubLocOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isSubLocOpen]);
   react.useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
@@ -2108,11 +2095,20 @@ function ScriptBreakdownSceneView({
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
                         CATEGORIES.filter(
-                          (cat) => !(cat.id === "LOCATION" && hasLocationTag)
+                          (cat) => !(cat.id === "LOCATION" && hasLocationTag) && !(cat.id === "SUBLOCATION" && !hasLocationTag)
                         ).map((cat) => /* @__PURE__ */ jsxRuntime.jsxs(
                           "button",
                           {
-                            onClick: () => addTag(cat.id),
+                            onClick: () => {
+                              const existingTag = tags.find(
+                                (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
+                              );
+                              if (existingTag && existingTag.id) {
+                                updateTag == null ? void 0 : updateTag(existingTag.id, cat.id);
+                              } else {
+                                addTag(cat.id);
+                              }
+                            },
                             className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-white/80 hover:shadow-[0_2px_10px_rgb(0,0,0,0.02)] active:scale-[0.98]",
                             style: { color: cat.color },
                             children: [
@@ -2199,6 +2195,7 @@ function ScriptBreakdownSceneView({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto bg-slate-100/80 text-slate-500 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-widest border border-slate-200/50 shadow-inner", children: tags.length })
         ] }),
         tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
+          if (cat.id === "SUBLOCATION" && !hasLocationTag) return null;
           const catTags = Array.from(
             new Map(
               tags.filter((t) => t.category_id === cat.id).map((tag) => [tag.name.toLowerCase(), tag])
@@ -2216,88 +2213,15 @@ function ScriptBreakdownSceneView({
               ),
               cat.label
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-              catTags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
-                  style: { color: cat.color },
-                  children: tag.name
-                },
-                index
-              )),
-              cat.id === "LOCATION" && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "relative flex items-center",
-                  ref: subLocPopoverRef,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: () => setIsSubLocOpen(!isSubLocOpen),
-                        className: "flex items-center justify-center w-5 h-5 rounded-full hover:bg-slate-200 transition-colors",
-                        title: "Add Sub Location",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 text-slate-500" })
-                      }
-                    ),
-                    isSubLocOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-2 w-56 bg-white backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-3 z-50 animate-in fade-in zoom-in-95", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-2 px-1", children: "Add Sub Location" }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
-                          {
-                            type: "text",
-                            value: subLocInput,
-                            onChange: (e) => setSubLocInput(e.target.value),
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter") {
-                                addSubLocation(subLocInput);
-                                setSubLocInput("");
-                                setIsSubLocOpen(false);
-                              }
-                            },
-                            className: "w-full text-xs px-3 py-2 bg-white/50 border border-white/60 rounded-xl outline-none focus:bg-white/80 focus:border-white transition-all text-slate-700 font-bold shadow-[0_2px_10px_rgb(0,0,0,0.02)] placeholder:font-medium placeholder:text-slate-400",
-                            placeholder: "Sub location...",
-                            autoFocus: true
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
-                          {
-                            onClick: () => {
-                              addSubLocation(subLocInput);
-                              setSubLocInput("");
-                              setIsSubLocOpen(false);
-                            },
-                            className: "flex items-center justify-center shrink-0 bg-slate-800 text-white px-3.5 py-2 rounded-xl text-[11px] font-bold hover:bg-slate-700 hover:shadow-md transition-all active:scale-95",
-                            children: "Add"
-                          }
-                        )
-                      ] })
-                    ] })
-                  ]
-                }
-              ),
-              cat.id === "LOCATION" && subLocations.map((subLoc) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "group flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white backdrop-blur-md border border-slate-200/50 shadow-[0_4px_15px_rgb(0,0,0,0.03)] transition-all duration-300 cursor-default text-slate-500",
-                  children: [
-                    subLoc,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: () => removeSubLocation(subLoc),
-                        className: "w-3.5 h-3.5 rounded-full hover:bg-slate-300/50 flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-2.5 h-2.5" })
-                      }
-                    )
-                  ]
-                },
-                `sub-${subLoc}`
-              ))
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
+                style: { color: cat.color },
+                children: tag.name
+              },
+              index
+            )) })
           ] }, cat.id);
         }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-slate-400 italic bg-white/40 p-6 rounded-[2rem] border border-white border-dashed text-center shadow-[0_4px_20px_rgb(0,0,0,0.02)]", children: "Highlight text to tag elements." })
       ] })
@@ -2310,7 +2234,6 @@ function useScriptBreakdownScene(options) {
   const autoTaggedSceneRef = react.useRef(null);
   const [scene, setScene] = react.useState(null);
   const [menuPlacement, setMenuPlacement] = react.useState("top");
-  const [subLocations, setSubLocations] = react.useState([]);
   const [sceneBrief, setSceneBrief] = react.useState("");
   const [isSummarizing, setIsSummarizing] = react.useState(false);
   const [isLoading, setIsLoading] = react.useState(true);
@@ -2428,28 +2351,20 @@ function useScriptBreakdownScene(options) {
       console.error("Failed to summarize scene:", res);
     }
   };
-  const addSubLocation = react.useCallback(
-    (subLocation) => {
-      const trimmed = subLocation.trim();
-      if (trimmed && !subLocations.includes(trimmed)) {
-        setSubLocations((prev) => [...prev, trimmed]);
-      }
-    },
-    [subLocations]
-  );
-  const removeSubLocation = react.useCallback((subLocation) => {
-    setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
-  }, []);
   react.useEffect(() => {
-    setSubLocations([]);
     setSceneBrief("");
     autoTaggedSceneRef.current = null;
   }, [options.scene_url]);
   react.useEffect(() => {
     if (options.preLoadedTags && options.preLoadedTags.length > 0) {
-      setTags(options.preLoadedTags);
+      setTags((prev) => {
+        if (JSON.stringify(prev) === JSON.stringify(options.preLoadedTags)) {
+          return prev;
+        }
+        return options.preLoadedTags || [];
+      });
     }
-  }, []);
+  }, [options.preLoadedTags]);
   const clearSelection = react.useCallback(() => {
     var _a;
     setSelectionMenu(null);
@@ -2576,6 +2491,25 @@ function useScriptBreakdownScene(options) {
       setTags((prev) => [...prev, tagToRemove]);
     }
   };
+  const updateTag = async (id, categoryId) => {
+    var _a;
+    const tagToUpdate = tags.find((t) => t.id === id);
+    if (!tagToUpdate) return;
+    setTags(
+      (prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { category_id: categoryId }) : t)
+    );
+    clearSelection();
+    try {
+      await ((_a = options.onTagUpdated) == null ? void 0 : _a.call(options, id, categoryId));
+    } catch (error2) {
+      console.error("Failed to update tag:", error2);
+      setTags(
+        (prev) => prev.map(
+          (t) => t.id === id ? __spreadProps(__spreadValues({}, t), { category_id: tagToUpdate.category_id }) : t
+        )
+      );
+    }
+  };
   return {
     scene,
     blocks,
@@ -2586,13 +2520,11 @@ function useScriptBreakdownScene(options) {
     selectionMenu,
     handleMouseUp,
     addTag,
+    updateTag,
     removeTag,
     clearSelection,
     menuPlacement,
     menuRef,
-    subLocations,
-    addSubLocation,
-    removeSubLocation,
     sceneBrief,
     setSceneBrief,
     handleAISummarize,