@vishu1301/script-writing 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, ArrowRight, User, ChevronRight, Upload, Save, FileDown, RefreshCcw, Cog } from 'lucide-react';
+import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, ArrowRight, User, ChevronRight, Upload, Save, FileDown, RefreshCcw, Cog, Loader2, Tags } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as pdfjs from 'pdfjs-dist';
 import jsPDF from 'jspdf';
@@ -334,44 +334,53 @@ function ScreenplayEditorView({
     }
   }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 max-w-fit p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar", children: blockTypes.map((type) => {
-      var _a;
-      const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
-          onClick: () => handleBlockTypeChange(type),
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "blockType",
-                id: `block-type-${type}`,
-                className: "sr-only",
-                "aria-label": blockStyles[type].label,
-                checked: selected,
-                readOnly: true
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "label",
-              {
-                htmlFor: `block-type-${type}`,
-                className: "flex items-center gap-2 cursor-pointer",
-                children: [
-                  icons[type],
-                  /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
-                ]
-              }
-            )
-          ]
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar",
+        style: {
+          maxWidth: "1024px"
         },
-        type
-      );
-    }) }),
+        children: blockTypes.map((type) => {
+          var _a;
+          const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
+              onClick: () => handleBlockTypeChange(type),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "blockType",
+                    id: `block-type-${type}`,
+                    className: "sr-only",
+                    "aria-label": blockStyles[type].label,
+                    checked: selected,
+                    readOnly: true
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: `block-type-${type}`,
+                    className: "flex items-center gap-2 cursor-pointer",
+                    children: [
+                      icons[type],
+                      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
+                    ]
+                  }
+                )
+              ]
+            },
+            type
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -1622,6 +1631,537 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
   }
 };
 
-export { ScreenplayEditorView, blockStyles, blockTypes, handleSaveAsPdf, handleSaveAsSbx, icons, timeOfDayOptions, useScreenplayEditor, uuid };
+// app/types/script-breakdown.types.tsx
+var CATEGORIES = [
+  { id: "CAST", label: "Cast", color: "#7c3aed", hex: "#8b5cf6" },
+  { id: "PROP", label: "Prop", color: "#ea580c", hex: "#f97316" },
+  { id: "COSTUME", label: "Costume", color: "#db2777", hex: "#ec4899" },
+  { id: "VEHICLE", label: "Vehicle", color: "#2563eb", hex: "#3b82f6" },
+  { id: "SET_PROP", label: "Set Prop", color: "#16a34a", hex: "#22c55e" },
+  { id: "EXTRA", label: "Extra", color: "#0d9488", hex: "#14b8a6" },
+  { id: "LOCATION", label: "Location", color: "#ca8a04", hex: "#eab308" }
+];
+function ScriptBreakdownSceneView({
+  blocks,
+  characters,
+  isLoading,
+  sceneNumber,
+  tags,
+  selectionMenu,
+  handleMouseUp,
+  addTag,
+  removeTag,
+  clearSelection,
+  menuPlacement,
+  menuRef
+}) {
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
+  useEffect(() => {
+    const fontId = "google-font-courier-prime";
+    const styleId = "screenplay-editor-force-v4";
+    if (!document.getElementById(fontId)) {
+      const link = document.createElement("link");
+      link.id = fontId;
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
+      document.head.appendChild(link);
+    }
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        /* We target by the data-attribute to ensure the highest specificity possible */
+        [data-screenplay-editor] *, 
+        [data-screenplay-editor] div, 
+        [data-screenplay-editor] span, 
+        [data-screenplay-editor] [contenteditable="true"] {
+          font-family: ${COURIER_STACK} !important;
+          -webkit-font-smoothing: antialiased;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, [COURIER_STACK]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
+    ] });
+  }
+  const hasLocationTag = tags.some((t) => t.categoryId === "LOCATION");
+  const renderBlockText = (block) => {
+    const blockTags = tags.filter((t) => t.blockId === block.id).sort((a, b) => a.startIndex - b.startIndex);
+    if (blockTags.length === 0) return block.text;
+    const nodes = [];
+    let currentIndex = 0;
+    blockTags.forEach((tag) => {
+      if (tag.startIndex > currentIndex) {
+        nodes.push(
+          /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex, tag.startIndex) }, `text-${currentIndex}`)
+        );
+      }
+      const category = CATEGORIES.find((c) => c.id === tag.categoryId);
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: `${category == null ? void 0 : category.label} (Click to edit)`,
+            onClick: (e) => {
+              e.stopPropagation();
+              const selection = window.getSelection();
+              if (!selection) return;
+              const range = document.createRange();
+              const textNode = e.currentTarget.firstChild;
+              if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                range.selectNodeContents(textNode);
+              } else {
+                range.selectNodeContents(e.currentTarget);
+              }
+              selection.removeAllRanges();
+              selection.addRange(range);
+              setTimeout(() => handleMouseUp(), 0);
+            },
+            className: "cursor-pointer font-bold transition-opacity hover:opacity-70",
+            style: { color: category == null ? void 0 : category.color },
+            children: block.text.slice(tag.startIndex, tag.endIndex)
+          },
+          tag.id
+        )
+      );
+      currentIndex = tag.endIndex;
+    });
+    if (currentIndex < block.text.length) {
+      nodes.push(
+        /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
+      );
+    }
+    return nodes;
+  };
+  return /* @__PURE__ */ jsx("div", { className: "p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-8 items-start", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-auto shrink-0",
+        style: {
+          fontFamily: COURIER_STACK,
+          paddingLeft: "1.5in",
+          paddingRight: "1in",
+          paddingTop: "1in",
+          paddingBottom: "1in",
+          lineHeight: "1.2"
+        },
+        "data-screenplay-editor": "true",
+        onMouseUp: handleMouseUp,
+        children: blocks.map((block) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-block-id": block.id,
+            className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
+            style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
+              minHeight: "2.5rem"
+            }),
+            children: [
+              renderBlockText(block),
+              (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: menuRef,
+                  "data-screenplay-editor": "false",
+                  className: `tag-menu absolute z-50 bg-white/70 backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-2 flex flex-col w-56 animate-in fade-in zoom-in-95 duration-300 ease-out ${menuPlacement === "top" ? "origin-bottom" : "origin-top"}`,
+                  style: {
+                    top: selectionMenu.top,
+                    left: selectionMenu.left,
+                    transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
+                      /* @__PURE__ */ jsxs(
+                        "p",
+                        {
+                          className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
+                          title: selectionMenu.text,
+                          children: [
+                            '"',
+                            selectionMenu.text,
+                            '"'
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
+                      CATEGORIES.filter(
+                        (cat) => !(cat.id === "LOCATION" && hasLocationTag)
+                      ).map((cat) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => 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: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: "w-2 h-2 rounded-full shadow-sm group-hover:scale-125 transition-transform duration-300",
+                                  style: { backgroundColor: cat.hex }
+                                }
+                              ),
+                              cat.label
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-slate-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Select" })
+                          ]
+                        },
+                        cat.id
+                      )),
+                      tags.some(
+                        (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
+                      ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            const tagToRemove = tags.find(
+                              (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
+                            );
+                            if (tagToRemove) {
+                              removeTag(e, tagToRemove.id);
+                              clearSelection();
+                            }
+                          },
+                          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-rose-50 hover:text-rose-600 hover:shadow-[0_2px_10px_rgb(225,29,72,0.04)] active:scale-[0.98] text-slate-500 border border-transparent hover:border-rose-100",
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
+                              "Remove Tag"
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-rose-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Remove" })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          block.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "w-full lg:w-80 flex-shrink-0 bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8 sticky top-6", 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",
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
+        const catTags = Array.from(
+          new Map(
+            tags.filter((t) => t.categoryId === cat.id).map((tag) => [tag.text.toLowerCase(), tag])
+          ).values()
+        );
+        if (catTags.length === 0) return null;
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 border-b border-white/60 pb-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-2 h-2 rounded-full shadow-sm",
+                style: { backgroundColor: cat.hex }
+              }
+            ),
+            cat.label
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag) => /* @__PURE__ */ 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.text
+            },
+            tag.id
+          )) })
+        ] }, cat.id);
+      }) }) : /* @__PURE__ */ 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." })
+    ] })
+  ] }) });
+}
+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("&lt;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 scene = useMemo(() => {
+    return scenes.find((s) => s.scene_number === sceneNumber);
+  }, [scenes, sceneNumber]);
+  const blocks = useMemo(() => {
+    if (!scene || !scene.content) return [];
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(scene.content, "text/html");
+    const divs = Array.from(doc.querySelectorAll("div"));
+    const parsedBlocks = [];
+    const typeMap = {
+      divtype0: "SCENE_HEADING",
+      divtype2: "ACTION",
+      divtype3: "CHARACTER",
+      divtype4: "PARENTHETICAL",
+      divtype5: "DIALOGUE",
+      divtype6: "TRANSITION"
+    };
+    divs.forEach((div) => {
+      var _a;
+      const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
+      if (!divText) return;
+      let type = "ACTION";
+      for (const className of Array.from(div.classList)) {
+        if (typeMap[className]) {
+          type = typeMap[className];
+          break;
+        }
+      }
+      parsedBlocks.push({ id: uuid(), type, text: divText });
+    });
+    return parsedBlocks;
+  }, [scene]);
+  const characters = useMemo(() => {
+    const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
+      const text = b.text.trim().toUpperCase();
+      const parenIndex = text.indexOf("(");
+      return parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
+    }).filter(Boolean);
+    return [...new Set(chars)];
+  }, [blocks]);
+  const [tags, setTags] = useState([]);
+  const [selectionMenu, setSelectionMenu] = useState(null);
+  const autoTaggedSceneRef = useRef(null);
+  const [menuPlacement, setMenuPlacement] = useState("top");
+  const menuRef = useRef(null);
+  useEffect(() => {
+    setTags([]);
+    autoTaggedSceneRef.current = null;
+  }, [sceneNumber]);
+  useEffect(() => {
+    if (blocks.length > 0 && characters.length > 0 && autoTaggedSceneRef.current !== sceneNumber) {
+      const autoTags = [];
+      const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const sortedChars = [...characters].sort((a, b) => b.length - a.length);
+      blocks.forEach((block) => {
+        sortedChars.forEach((char) => {
+          const escapedChar = escapeRegExp(char);
+          const regex = new RegExp(`\\b${escapedChar}\\b`, "gi");
+          let match;
+          while ((match = regex.exec(block.text)) !== null) {
+            const isOverlapping = autoTags.some(
+              (t) => t.blockId === block.id && (match.index + char.length > t.startIndex && match.index < t.endIndex)
+            );
+            if (!isOverlapping) {
+              autoTags.push({
+                id: uuid(),
+                blockId: block.id,
+                categoryId: "CAST",
+                text: block.text.substring(match.index, match.index + char.length),
+                startIndex: match.index,
+                endIndex: match.index + char.length
+              });
+            }
+          }
+        });
+      });
+      setTags(autoTags);
+      autoTaggedSceneRef.current = sceneNumber;
+    }
+  }, [blocks, characters, sceneNumber]);
+  const clearSelection = useCallback(() => {
+    var _a;
+    setSelectionMenu(null);
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  }, []);
+  useEffect(() => {
+    if (!selectionMenu) {
+      setMenuPlacement("top");
+    }
+  }, [selectionMenu]);
+  useEffect(() => {
+    if (selectionMenu && menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      if (menuPlacement === "top" && rect.top < 100) {
+        setMenuPlacement("bottom");
+      } else if (menuPlacement === "bottom" && rect.bottom > window.innerHeight - 40 && rect.top > 300) {
+        setMenuPlacement("top");
+      }
+    }
+  }, [selectionMenu, menuPlacement]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (selectionMenu && !e.target.closest(".tag-menu")) {
+        clearSelection();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [selectionMenu, clearSelection]);
+  const getAbsoluteOffset = (container, targetNode, targetOffset) => {
+    let absoluteOffset = 0;
+    let found = false;
+    const traverse = (node) => {
+      var _a;
+      if (found) return;
+      if (node === targetNode) {
+        absoluteOffset += targetOffset;
+        found = true;
+        return;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        absoluteOffset += ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
+      } else {
+        for (let i = 0; i < node.childNodes.length; i++) {
+          traverse(node.childNodes[i]);
+          if (found) return;
+        }
+      }
+    };
+    traverse(container);
+    return found ? absoluteOffset : null;
+  };
+  const handleMouseUp = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
+    const range = selection.getRangeAt(0);
+    let container = range.commonAncestorContainer;
+    if (container.nodeType === Node.TEXT_NODE) container = container.parentElement;
+    const blockElem = container.closest("[data-block-id]");
+    if (!blockElem) return;
+    const blockId = blockElem.getAttribute("data-block-id");
+    const startOffset = getAbsoluteOffset(blockElem, range.startContainer, range.startOffset);
+    const endOffset = getAbsoluteOffset(blockElem, range.endContainer, range.endOffset);
+    if (startOffset !== null && endOffset !== null) {
+      const rect = range.getBoundingClientRect();
+      const blockRect = blockElem.getBoundingClientRect();
+      setSelectionMenu({
+        blockId,
+        startIndex: Math.min(startOffset, endOffset),
+        endIndex: Math.max(startOffset, endOffset),
+        text: selection.toString().trim(),
+        top: rect.top - blockRect.top,
+        left: rect.left - blockRect.left + rect.width / 2
+      });
+    }
+  };
+  const addTag = (categoryId) => {
+    if (!selectionMenu) return;
+    const newTag = {
+      id: uuid(),
+      blockId: selectionMenu.blockId,
+      categoryId,
+      text: selectionMenu.text,
+      startIndex: selectionMenu.startIndex,
+      endIndex: selectionMenu.endIndex
+    };
+    setTags((prev) => {
+      const filtered = prev.filter(
+        (t) => t.blockId !== newTag.blockId || !(newTag.endIndex > t.startIndex && newTag.startIndex < t.endIndex)
+      );
+      return [...filtered, newTag];
+    });
+    clearSelection();
+  };
+  const removeTag = (e, id) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setTags((prev) => prev.filter((t) => t.id !== id));
+    clearSelection();
+  };
+  return {
+    scene,
+    blocks,
+    characters,
+    isLoading,
+    error,
+    tags,
+    selectionMenu,
+    handleMouseUp,
+    addTag,
+    removeTag,
+    clearSelection,
+    menuPlacement,
+    menuRef
+  };
+}
+
+export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, blockStyles, blockTypes, handleSaveAsPdf, handleSaveAsSbx, icons, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, uuid };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map