@vishu1301/script-writing 1.0.3 → 1.0.5

package/README.md

@@ -1,20 +1,24 @@
-# Script Writing Editor
+# Script Writing & Breakdown Library
 
-An advanced, React and Next.js-based script and screenplay writing component for the web. 
+An advanced, React and Next.js-based script writing and breakdown analysis library for the web. 
 
-This component provides writers with an intuitive, distraction-free environment to draft, edit, and format their scripts according to industry standards, seamlessly integrated into any React or Next.js application.
+This package provides developers with an intuitive suite of tools to draft, edit, and format scripts according to industry standards, alongside powerful script breakdown utilities to highlight, tag, and analyze scene elements.
 
 ## Features
 
+- **Screenplay Editor Component:** Fully-featured WYSIWYG editor for screenplays.
 - **Industry-Standard Formatting:** Automatically formats text to screenplay guidelines including Scene Headings, Action, Character, Parenthetical, Dialogue, and Transitions.
 - **Smart Auto-Suggestions:** Intelligently suggests previously used Characters, Locations, and Character Extensions (like V.O., O.S.) as you type.
 - **PDF Import & Export:** Built-in tools to import and parse existing scripts from PDFs (`pdfjs-dist`) and export your drafts into perfectly formatted screenplay PDFs (`jsPDF`).
 - **Scene Management:** Easily toggle Scene Types (INT./EXT.) and Time of Day (DAY/NIGHT) alongside Scene Numbering features.
+- **Script Breakdown & Tagging:** Interactive scene viewer with auto-character tagging, text selection, and customizable element tagging (e.g., Cast, Props, Wardrobe).
 - **Keyboard Shortcuts:** Fluid writing experience using keyboard shortcuts (e.g., `Ctrl + ↑/↓` to change block types, `Enter` to create new blocks).
-- **Headless Architecture:** Core logic is exposed via the `useScreenplayEditor` hook, allowing complete customizability over the UI.
+- **Headless Architecture:** Core logic is exposed via hooks (`useScreenplayEditor` and `useScriptBreakdownScene`), allowing complete customizability over the UI.
 
 
 ## Installation
 
+Install the package via npm or yarn:
+
 ```bash
 npm install @vishu1301/script-writing

package/dist/index.cjs

@@ -359,44 +359,53 @@ function ScreenplayEditorView({
     }
   }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "radio",
-                name: "blockType",
-                id: `block-type-${type}`,
-                className: "sr-only",
-                "aria-label": blockStyles[type].label,
-                checked: selected,
-                readOnly: true
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "label",
-              {
-                htmlFor: `block-type-${type}`,
-                className: "flex items-center gap-2 cursor-pointer",
-                children: [
-                  icons[type],
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
-                ]
-              }
-            )
-          ]
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "blockType",
+                    id: `block-type-${type}`,
+                    className: "sr-only",
+                    "aria-label": blockStyles[type].label,
+                    checked: selected,
+                    readOnly: true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "label",
+                  {
+                    htmlFor: `block-type-${type}`,
+                    className: "flex items-center gap-2 cursor-pointer",
+                    children: [
+                      icons[type],
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
+                    ]
+                  }
+                )
+              ]
+            },
+            type
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1647,7 +1656,540 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
   }
 };
 
+// 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";
+  react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex, tag.startIndex) }, `text-${currentIndex}`)
+        );
+      }
+      const category = CATEGORIES.find((c) => c.id === tag.categoryId);
+      nodes.push(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
+      );
+    }
+    return nodes;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-8 items-start", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "p",
+                        {
+                          className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
+                          title: selectionMenu.text,
+                          children: [
+                            '"',
+                            selectionMenu.text,
+                            '"'
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
+                      CATEGORIES.filter(
+                        (cat) => !(cat.id === "LOCATION" && hasLocationTag)
+                      ).map((cat) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
+        "Tags",
+        /* @__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) => {
+        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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "w-2 h-2 rounded-full shadow-sm",
+                style: { backgroundColor: cat.hex }
+              }
+            ),
+            cat.label
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag) => /* @__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.text
+            },
+            tag.id
+          )) })
+        ] }, 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." })
+    ] })
+  ] }) });
+}
+function useScriptBreakdown({
+  scenes
+}) {
+  const [parsedScenes, setParsedScenes] = react.useState(scenes || []);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [hasFetchedFallback, setHasFetchedFallback] = react.useState(false);
+  react.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 = react.useMemo(() => {
+    return scenes.find((s) => s.scene_number === sceneNumber);
+  }, [scenes, sceneNumber]);
+  const blocks = react.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 = react.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] = react.useState([]);
+  const [selectionMenu, setSelectionMenu] = react.useState(null);
+  const autoTaggedSceneRef = react.useRef(null);
+  const [menuPlacement, setMenuPlacement] = react.useState("top");
+  const menuRef = react.useRef(null);
+  react.useEffect(() => {
+    setTags([]);
+    autoTaggedSceneRef.current = null;
+  }, [sceneNumber]);
+  react.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 = react.useCallback(() => {
+    var _a;
+    setSelectionMenu(null);
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  }, []);
+  react.useEffect(() => {
+    if (!selectionMenu) {
+      setMenuPlacement("top");
+    }
+  }, [selectionMenu]);
+  react.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]);
+  react.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
+  };
+}
+
+exports.CATEGORIES = CATEGORIES;
 exports.ScreenplayEditorView = ScreenplayEditorView;
+exports.ScriptBreakdownSceneView = ScriptBreakdownSceneView;
 exports.blockStyles = blockStyles;
 exports.blockTypes = blockTypes;
 exports.handleSaveAsPdf = handleSaveAsPdf;
@@ -1655,6 +2197,7 @@ exports.handleSaveAsSbx = handleSaveAsSbx;
 exports.icons = icons;
 exports.timeOfDayOptions = timeOfDayOptions;
 exports.useScreenplayEditor = useScreenplayEditor;
+exports.useScriptBreakdownScene = useScriptBreakdownScene;
 exports.uuid = uuid;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map