@vishu1301/script-writing 1.2.2 → 1.2.4

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);
@@ -2410,9 +2333,122 @@ function useScriptBreakdownScene(options) {
           end_index: aiTag.end_index
         });
       });
+      if (newTags.length > 0) {
+        const originalTags = tags;
+        setTags((prev) => {
+          const merged = [...prev];
+          newTags.forEach((newTag) => {
+            const isOverlapping = merged.some(
+              (t) => t.block_id === newTag.block_id && newTag.end_index > t.start_index && newTag.start_index < t.end_index
+            );
+            if (!isOverlapping) {
+              merged.push(newTag);
+            }
+          });
+          return merged;
+        });
+        try {
+          if (options.onTagsBulkAdded) {
+            await options.onTagsBulkAdded(newTags, parsedSummaryData.summarise);
+          }
+        } catch (error2) {
+          console.error("Failed to bulk add AI-generated tags:", error2);
+          setTags(originalTags);
+        }
+      }
+      return data;
+    } else {
+      setIsSummarizing(false);
+      console.error("Failed to summarize scene:", res);
+    }
+  };
+  const bulkCreateTags = react.useCallback(async () => {
+    if (blocks.length === 0) return;
+    const newTags = [];
+    const seenCharacters = /* @__PURE__ */ new Set();
+    const timeOfDays = ["DAY", "NIGHT"];
+    const isTimeOfDay = (str) => timeOfDays.includes(str.toUpperCase());
+    blocks.forEach((block) => {
+      if (block.type === "CHARACTER") {
+        const text = block.text.trim();
+        const parenIndex = text.indexOf("(");
+        const charName = parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
+        if (charName && !seenCharacters.has(charName.toUpperCase())) {
+          seenCharacters.add(charName.toUpperCase());
+          const startIndex = text.indexOf(charName);
+          if (startIndex !== -1) {
+            newTags.push({
+              id: uuid(),
+              block_id: block.id,
+              category_id: "CAST",
+              name: charName,
+              start_index: startIndex,
+              end_index: startIndex + charName.length
+            });
+          }
+        }
+      } else if (block.type === "SCENE_HEADING") {
+        const text = block.text.trim();
+        const typeMatch = text.match(
+          /^(INT\/EXT|INT\.?\/EXT\.?|INT\.EXT\.?|INT|EXT|I\/E)\.?\s+/i
+        );
+        let remainingText = text;
+        let offset = 0;
+        if (typeMatch) {
+          offset = typeMatch[0].length;
+          remainingText = text.substring(offset);
+        }
+        const parts = remainingText.split(/\s+-\s+/);
+        if (parts.length > 0) {
+          const locationName = parts[0].trim();
+          const locStart = text.indexOf(locationName, offset);
+          if (locStart !== -1 && locationName) {
+            newTags.push({
+              id: uuid(),
+              block_id: block.id,
+              category_id: "LOCATION",
+              name: locationName,
+              start_index: locStart,
+              end_index: locStart + locationName.length
+            });
+          }
+          if (parts.length > 1) {
+            const secondPart = parts[1].trim();
+            const isLast = parts.length === 2;
+            if (!isLast || !isTimeOfDay(secondPart)) {
+              const subLocStart = text.indexOf(
+                secondPart,
+                locStart + locationName.length
+              );
+              if (subLocStart !== -1 && secondPart) {
+                newTags.push({
+                  id: uuid(),
+                  block_id: block.id,
+                  category_id: "SUBLOCATION",
+                  name: secondPart,
+                  start_index: subLocStart,
+                  end_index: subLocStart + secondPart.length
+                });
+              }
+            }
+          }
+        }
+      }
+    });
+    if (newTags.length > 0) {
+      const originalTags = tags;
       setTags((prev) => {
         const merged = [...prev];
+        const existingChars = new Set(
+          merged.filter(
+            (t) => t.category_id === "CHARACTER" || t.category_id === "CAST"
+          ).map((t) => t.name.toUpperCase())
+        );
         newTags.forEach((newTag) => {
+          if (newTag.category_id === "CHARACTER") {
+            if (existingChars.has(newTag.name.toUpperCase())) return;
+            existingChars.add(newTag.name.toUpperCase());
+          }
           const isOverlapping = merged.some(
             (t) => t.block_id === newTag.block_id && newTag.end_index > t.start_index && newTag.start_index < t.end_index
           );
@@ -2422,26 +2458,17 @@ function useScriptBreakdownScene(options) {
         });
         return merged;
       });
-      return data;
-    } else {
-      setIsSummarizing(false);
-      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]);
+      try {
+        if (options.onTagsBulkAdded) {
+          await options.onTagsBulkAdded(newTags);
+        }
+      } catch (error2) {
+        console.error("Failed to bulk create tags:", error2);
+        setTags(originalTags);
       }
-    },
-    [subLocations]
-  );
-  const removeSubLocation = react.useCallback((subLocation) => {
-    setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
-  }, []);
+    }
+  }, [blocks, tags, options.onTagsBulkAdded]);
   react.useEffect(() => {
-    setSubLocations([]);
     setSceneBrief("");
     autoTaggedSceneRef.current = null;
   }, [options.scene_url]);
@@ -2455,6 +2482,18 @@ function useScriptBreakdownScene(options) {
       });
     }
   }, [options.preLoadedTags]);
+  react.useEffect(() => {
+    const doBulkCreate = async () => {
+      if (blocks.length > 0 && !autoTaggedSceneRef.current) {
+        const hasPreloadedTags = options.preLoadedTags && options.preLoadedTags.length > 0;
+        if (!hasPreloadedTags) {
+          autoTaggedSceneRef.current = options.scene_url;
+          await bulkCreateTags();
+        }
+      }
+    };
+    doBulkCreate();
+  }, [blocks, options.scene_url, options.preLoadedTags, bulkCreateTags]);
   const clearSelection = react.useCallback(() => {
     var _a;
     setSelectionMenu(null);
@@ -2581,6 +2620,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,
@@ -2591,13 +2649,11 @@ function useScriptBreakdownScene(options) {
     selectionMenu,
     handleMouseUp,
     addTag,
+    updateTag,
     removeTag,
     clearSelection,
     menuPlacement,
     menuRef,
-    subLocations,
-    addSubLocation,
-    removeSubLocation,
     sceneBrief,
     setSceneBrief,
     handleAISummarize,