@vishu1301/script-writing 0.3.8 → 0.4.0

package/dist/index.cjs

@@ -48,6 +48,7 @@ var blockStyles = {
     inputStyle: {
       textTransform: "uppercase",
       fontWeight: 700,
+      maxWidth: "6.0in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
@@ -56,21 +57,24 @@ var blockStyles = {
   },
   ACTION: {
     label: "Action",
-    className: "text-zinc-800 leading-relaxed",
+    className: "text-zinc-800",
     inputStyle: {
+      maxWidth: "6.0in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
-      lineHeight: 1.7
+      lineHeight: "12pt"
     }
   },
   CHARACTER: {
     label: "Character",
-    className: "uppercase font-bold text-center text-zinc-900 tracking-widest",
+    className: "uppercase font-bold text-zinc-900 tracking-widest",
     inputStyle: {
       textTransform: "uppercase",
-      textAlign: "center",
+      textAlign: "left",
+      marginLeft: "2.0in",
+      maxWidth: "4.0in",
       fontWeight: 700,
       letterSpacing: "0.1em",
       outline: "none",
@@ -81,31 +85,32 @@ var blockStyles = {
   },
   PARENTHETICAL: {
     label: "Parenthetical",
-    className: "text-center text-zinc-600",
+    className: "text-zinc-600",
     inputStyle: {
       fontStyle: "normal",
-      maxWidth: "20rem",
-      margin: "0 auto",
+      maxWidth: "3.0in",
+      marginLeft: "1.5in",
+      textTransform: "lowercase",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
-      textAlign: "center"
+      textAlign: "left"
     }
   },
   DIALOGUE: {
     label: "Dialogue",
-    className: "text-zinc-900 leading-relaxed max-w-[30rem] mx-auto",
+    className: "text-zinc-900",
     inputStyle: {
-      marginLeft: "auto",
-      marginRight: "auto",
+      marginLeft: "1.0in",
+      maxWidth: "3.5in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
       fontSize: "1.05rem",
       textAlign: "left",
-      lineHeight: 1.7
+      lineHeight: "12pt"
     }
   },
   TRANSITION: {
@@ -130,6 +135,8 @@ function ScreenplayEditorView({
   refs,
   focusedBlockId,
   showSuggestions,
+  showExtensionSuggestions,
+  characterExtensions,
   locations,
   characters,
   sceneNumbers,
@@ -137,6 +144,7 @@ function ScreenplayEditorView({
   handleSceneTypeChange,
   handleTimeOfDayChange,
   handleBlockTypeChange,
+  handleSelectCharacterExtension,
   handleKeyDown,
   handleFocus,
   handleBlur,
@@ -187,7 +195,7 @@ function ScreenplayEditorView({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: pages.map((pageBlocks, pageIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 ring-1 ring-zinc-200/50 rounded-sm md:rounded-md p-16 md:p-20 flex flex-col w-[210mm] min-h-[297mm] shrink-0",
+        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 ring-1 ring-zinc-200/50 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-[297mm] shrink-0",
         style: {
           fontFamily: "var(--font-courier-prime, 'Courier New', Courier, monospace)"
         },
@@ -229,7 +237,7 @@ function ScreenplayEditorView({
                         "aria-haspopup": "listbox",
                         "aria-expanded": focusedBlockId === block.id && showSuggestions && locations.length > 0,
                         spellCheck: false,
-                        className: "min-w-[5rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
+                        className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
                         onInput: (e) => handleBlockTextChange(
                           block.id,
                           e.target.innerText
@@ -351,6 +359,34 @@ function ScreenplayEditorView({
                         char
                       )) })
                     }
+                  ),
+                  focusedBlockId === block.id && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      role: "listbox",
+                      id: `extension-suggestions-${block.id}`,
+                      className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
+                        const openParenIndex = block.text.lastIndexOf("(");
+                        const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
+                        return ext.toUpperCase().includes(query);
+                      }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          role: "option",
+                          className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleSelectCharacterExtension(ext);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
+                          ]
+                        },
+                        ext
+                      )) })
+                    }
                   )
                 ] })
               },
@@ -468,6 +504,8 @@ function createNewBlock(type) {
   if (type === "SCENE_HEADING") {
     newBlock.sceneType = "INT.";
     newBlock.timeOfDay = "DAY";
+  } else if (type === "PARENTHETICAL") {
+    newBlock.text = "()";
   }
   return newBlock;
 }
@@ -573,6 +611,7 @@ function useScreenplayEditor() {
   );
   const [newBlockId, setNewBlockId] = react.useState(null);
   const [showSuggestions, setShowSuggestions] = react.useState(false);
+  const [showExtensionSuggestions, setShowExtensionSuggestions] = react.useState(false);
   const blurTimeout = react.useRef(null);
   const [isPageSplitEnabled, setIsPageSplitEnabled] = react.useState(false);
   const [pageBreaks, setPageBreaks] = react.useState([]);
@@ -587,12 +626,23 @@ function useScreenplayEditor() {
     }
     setIsPageSplitEnabled((prev) => !prev);
   }, [focusedBlockId]);
+  const characterExtensions = react.useMemo(
+    () => ["(V.O.)", "(O.S.)", "(O.C.)", "(SUBTITLE)", "(CONT'D)"],
+    []
+  );
   const locations = react.useMemo(() => {
     const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
     return [...new Set(locs)];
   }, [blocks]);
   const characters = react.useMemo(() => {
-    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
+    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => {
+      const text = b.text.trim().toUpperCase();
+      const parenIndex = text.indexOf("(");
+      if (parenIndex > -1) {
+        return text.substring(0, parenIndex).trim();
+      }
+      return text;
+    }).filter(Boolean);
     return [...new Set(chars)];
   }, [blocks]);
   const sceneNumbers = react.useMemo(() => {
@@ -607,13 +657,22 @@ function useScreenplayEditor() {
     return map;
   }, [blocks]);
   react.useEffect(() => {
-    var _a;
     if (newBlockId && refs.current[newBlockId]) {
-      (_a = refs.current[newBlockId]) == null ? void 0 : _a.focus();
+      const block = blocks.find((b) => b.id === newBlockId);
+      const el = refs.current[newBlockId];
+      if (el && block) {
+        el.focus();
+        el.innerText = block.text;
+        if (block.type === "PARENTHETICAL") {
+          setTimeout(() => setCaretPosition(el, 1), 0);
+        } else {
+          setTimeout(() => setCaretPosition(el, block.text.length), 0);
+        }
+      }
       setFocusedBlockId(newBlockId);
       setNewBlockId(null);
     }
-  }, [newBlockId]);
+  }, [newBlockId, blocks]);
   react.useEffect(() => {
     blocks.forEach((block) => {
       const element = refs.current[block.id];
@@ -622,6 +681,23 @@ function useScreenplayEditor() {
       }
     });
   }, [blocks, isPageSplitEnabled, pageBreaks]);
+  react.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      const isInsideBlock = target.closest("[data-block-id]");
+      const isInsideToolbar = target.closest(".sticky");
+      const isInsideSuggestions = target.closest('[role="listbox"]');
+      if (!isInsideBlock && !isInsideToolbar && !isInsideSuggestions) {
+        setFocusedBlockId("");
+        setShowSuggestions(false);
+        setShowExtensionSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
   react.useEffect(() => {
     if (!isPageSplitEnabled) {
       setPageBreaks([]);
@@ -714,9 +790,45 @@ function useScreenplayEditor() {
       focusStateRef.current = null;
     }
   }, [pages]);
-  const handleBlockTextChange = react.useCallback((id, text) => {
-    setBlocks((bs) => updateBlock(bs, id, "text", text));
-  }, []);
+  const handleBlockTextChange = react.useCallback(
+    (id, text) => {
+      const block = blocks.find((b) => b.id === id);
+      if (!block) return;
+      if (block.type === "CHARACTER") {
+        const trimmedText = text.trim();
+        const openParenIndex = trimmedText.lastIndexOf("(");
+        const closeParenIndex = trimmedText.lastIndexOf(")");
+        if (openParenIndex !== -1 && openParenIndex > closeParenIndex) {
+          setShowExtensionSuggestions(true);
+          setShowSuggestions(false);
+        } else {
+          setShowExtensionSuggestions(false);
+          setShowSuggestions(openParenIndex === -1);
+        }
+      } else if (showExtensionSuggestions) {
+        setShowExtensionSuggestions(false);
+      }
+      let processedText = text;
+      if (block.type === "PARENTHETICAL") {
+        const clean = text.replace(/[()]/g, "");
+        processedText = `(${clean})`;
+      }
+      setBlocks(
+        (bs) => updateBlock(bs, id, "text", processedText)
+      );
+      if (text !== processedText) {
+        const el = refs.current[id];
+        if (el) {
+          const offset = getCaretCharacterOffsetWithin(el);
+          const charsBeforeCaret = text.substring(0, offset).replace(/[()]/g, "").length;
+          const newOffset = 1 + charsBeforeCaret;
+          el.innerText = processedText;
+          setCaretPosition(el, newOffset);
+        }
+      }
+    },
+    [blocks, showExtensionSuggestions]
+  );
   const handleSceneTypeChange = react.useCallback(
     (id, sceneType) => {
       setBlocks(
@@ -747,13 +859,48 @@ function useScreenplayEditor() {
       setTimeout(() => {
         const el = refs.current[focusedBlockId];
         if (el) {
-          el.innerText = "";
           el.focus();
+          const newBlock = createNewBlock(newType);
+          el.innerText = newBlock.text;
+          if (newType === "PARENTHETICAL") {
+            setCaretPosition(el, 1);
+          } else {
+            setCaretPosition(el, newBlock.text.length);
+          }
         }
       }, 0);
     },
     [focusedBlockId]
   );
+  const handleSelectCharacterExtension = react.useCallback(
+    (extension) => {
+      if (!focusedBlockId) return;
+      setBlocks((currentBlocks) => {
+        const block = currentBlocks.find((b) => b.id === focusedBlockId);
+        if (!block || block.type !== "CHARACTER") return currentBlocks;
+        const parenIndex = block.text.indexOf("(");
+        const baseText = (parenIndex > -1 ? block.text.substring(0, parenIndex) : block.text).trim();
+        const newText = `${baseText} ${extension}`;
+        const newBlocks = updateBlock(
+          currentBlocks,
+          focusedBlockId,
+          "text",
+          newText
+        );
+        setTimeout(() => {
+          const el = refs.current[focusedBlockId];
+          if (el) {
+            el.innerText = newText;
+            el.focus();
+            setCaretPosition(el, newText.length);
+          }
+        }, 0);
+        return newBlocks;
+      });
+      setShowExtensionSuggestions(false);
+    },
+    [focusedBlockId]
+  );
   const focusBlock = (id, position = "start") => {
     const el = refs.current[id];
     if (!el) return;
@@ -767,19 +914,44 @@ function useScreenplayEditor() {
     sel.addRange(range);
   };
   const cycleBlockType = (id, direction) => {
-    setBlocks((bs) => {
-      const block = bs.find((b) => b.id === id);
-      if (!block) return bs;
-      const idx = blockTypes.indexOf(block.type);
-      let newIdx = direction === "up" ? idx - 1 : idx + 1;
-      if (newIdx < 0) newIdx = blockTypes.length - 1;
-      if (newIdx >= blockTypes.length) newIdx = 0;
-      return updateBlock(bs, id, "type", blockTypes[newIdx]);
-    });
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    const idx = blockTypes.indexOf(block.type);
+    let newIdx = direction === "up" ? idx - 1 : idx + 1;
+    if (newIdx < 0) newIdx = blockTypes.length - 1;
+    if (newIdx >= blockTypes.length) newIdx = 0;
+    const newType = blockTypes[newIdx];
+    setBlocks((bs) => changeBlockType(bs, id, newType));
+    setTimeout(() => {
+      const el = refs.current[id];
+      if (el) {
+        el.focus();
+        const newBlock = createNewBlock(newType);
+        el.innerText = newBlock.text;
+        if (newType === "PARENTHETICAL") {
+          setCaretPosition(el, 1);
+        } else {
+          setCaretPosition(el, el.innerText.length);
+        }
+      }
+    }, 10);
   };
   const handleKeyDown = react.useCallback(
     (e, id, text) => {
       var _a;
+      const block = blocks.find((b) => b.id === id);
+      if ((block == null ? void 0 : block.type) === "PARENTHETICAL") {
+        const offset = getCaretCharacterOffsetWithin(e.currentTarget);
+        if (e.key === "Backspace" && (offset <= 1 || text === "()")) {
+          e.preventDefault();
+          cycleBlockType(id, "up");
+          return;
+        }
+        if (e.key === "Delete" && (offset >= text.length - 1 || text === "()")) {
+          e.preventDefault();
+          return;
+        }
+      }
       if ((e.key === "Backspace" || e.key === "Delete") && text.length <= 1) {
         e.preventDefault();
         const { newBlocks, nextFocusedId } = deleteBlock(
@@ -805,11 +977,9 @@ function useScreenplayEditor() {
       } else if (e.key === "ArrowUp" && e.ctrlKey) {
         e.preventDefault();
         cycleBlockType(id, "up");
-        requestAnimationFrame(() => focusBlock(id));
       } else if (e.key === "ArrowDown" && e.ctrlKey) {
         e.preventDefault();
         cycleBlockType(id, "down");
-        requestAnimationFrame(() => focusBlock(id));
       } else if (e.key === "ArrowUp" && !e.ctrlKey) {
         const selection = window.getSelection();
         if (!selection || !selection.isCollapsed || selection.rangeCount === 0) {
@@ -886,18 +1056,36 @@ function useScreenplayEditor() {
         }
       }
     },
-    [blocks]
+    [blocks, handleBlockTextChange]
   );
   const handleFocus = react.useCallback((id) => {
     if (blurTimeout.current) {
       clearTimeout(blurTimeout.current);
     }
     setFocusedBlockId(id);
-    setShowSuggestions(true);
-  }, []);
+    const block = blocks.find((b) => b.id === id);
+    if ((block == null ? void 0 : block.type) === "CHARACTER") {
+      const trimmedText = block.text.trim();
+      const openParenIndex = trimmedText.lastIndexOf("(");
+      const closeParenIndex = trimmedText.lastIndexOf(")");
+      if (openParenIndex !== -1 && openParenIndex > closeParenIndex) {
+        setShowExtensionSuggestions(true);
+        setShowSuggestions(false);
+      } else {
+        setShowExtensionSuggestions(false);
+        setShowSuggestions(openParenIndex === -1);
+      }
+    } else {
+      setShowSuggestions(true);
+      setShowExtensionSuggestions(false);
+    }
+  }, [blocks]);
   const handleBlur = react.useCallback((id) => {
     if (document.activeElement === refs.current[id]) return;
-    blurTimeout.current = setTimeout(() => setShowSuggestions(false), 200);
+    blurTimeout.current = setTimeout(() => {
+      setShowSuggestions(false);
+      setShowExtensionSuggestions(false);
+    }, 200);
   }, []);
   return {
     blocks,
@@ -907,6 +1095,8 @@ function useScreenplayEditor() {
     refs,
     focusedBlockId,
     showSuggestions,
+    showExtensionSuggestions,
+    characterExtensions,
     locations,
     characters,
     sceneNumbers,
@@ -914,6 +1104,7 @@ function useScreenplayEditor() {
     handleSceneTypeChange,
     handleTimeOfDayChange,
     handleBlockTypeChange,
+    handleSelectCharacterExtension,
     handleKeyDown,
     handleFocus,
     handleBlur