@vishu1301/script-writing 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -359,51 +359,127 @@ function ScreenplayEditorView({
     }
   }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "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",
+        className: "sticky top-6 z-50 mx-auto bg-white/70 backdrop-blur-2xl border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-zinc-900/5 rounded-[2rem] flex items-center justify-between p-2 mb-12 select-none transition-all",
         style: {
-          maxWidth: "1024px"
+          maxWidth: "1240px"
         },
-        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
-          );
-        })
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 overflow-x-auto custom-scrollbar pr-2 items-center", 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: `group flex items-center gap-2.5 px-4 py-2 rounded-full font-semibold text-sm transition-all duration-300 ease-out active:scale-95 ${selected ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
+                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 pointer-events-none",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200`,
+                            children: icons[type]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden sm:inline tracking-wide", children: blockStyles[type].label })
+                      ]
+                    }
+                  )
+                ]
+              },
+              type
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxRuntime.jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-[18px] h-[18px]" }) }) }),
+            onSave && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSave,
+                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
+                title: "Save Script",
+                "aria-label": "Save Script",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            onSaveAsPdf && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSaveAsPdf,
+                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
+                title: "Save as PDF",
+                "aria-label": "Save Script as PDF",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            onSaveAsSbx && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSaveAsSbx,
+                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
+                title: "Sync with Cloud (SBX)",
+                "aria-label": "Save Script as SBX",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsRulesOpen(!isRulesOpen),
+                className: `flex items-center justify-center w-10 h-10 rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
+                title: "Settings & Shortcuts",
+                "aria-label": "Toggle Settings",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-[calc(100%+1rem)] right-0 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] ring-1 ring-zinc-900/5 p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-72 origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4 text-zinc-400" }),
+                "Settings & Shortcuts"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Enter" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Backspace" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Ctrl" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "\u2191/\u2193" })
+                  ] })
+                ] })
+              ] }) })
+            ] })
+          ] })
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -641,79 +717,7 @@ function ScreenplayEditorView({
           );
         })
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-6 right-6 flex flex-col items-end gap-4 z-50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-5 h-5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Import" })
-      ] }) }),
-      onSave && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: onSave,
-          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
-          "aria-label": "Save Script",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Save" })
-          ]
-        }
-      ),
-      onSaveAsPdf && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: onSaveAsPdf,
-          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
-          "aria-label": "Save Script as PDF",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Save as PDF" })
-          ]
-        }
-      ),
-      onSaveAsSbx && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: onSaveAsSbx,
-          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
-          "aria-label": "Save Script as SBX",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Save" })
-          ]
-        }
-      ),
-      isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/80 backdrop-blur-md rounded-xl shadow-lg border border-zinc-200/50 p-4 text-xs text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-64 origin-bottom-right animate-in fade-in zoom-in-95", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Block" }),
-            /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Enter" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Delete Block" }),
-            /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Backspace" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Change Type" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Ctrl" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" }),
-              /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "\u2191/\u2193" })
-            ] })
-          ] })
-        ] }) }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => setIsRulesOpen(!isRulesOpen),
-          className: `flex items-center justify-center w-12 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300 ${isRulesOpen ? "rotate-90" : "rotate-0"}`,
-          "aria-label": "Toggle Settings",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-5 h-5" })
-        }
-      )
-    ] })
+    ) })
   ] });
 }
 
@@ -1376,6 +1380,33 @@ function useScreenplayEditor(options) {
           return block;
         });
         setBlocks(finalizedBlocks);
+        if (options == null ? void 0 : options.onSave) {
+          options.onSave(content);
+          const typeToDivClass = {
+            SCENE_HEADING: "divtype0",
+            ACTION: "divtype2",
+            CHARACTER: "divtype3",
+            PARENTHETICAL: "divtype4",
+            DIALOGUE: "divtype5",
+            TRANSITION: "divtype6",
+            GENERAL: "divtype2"
+          };
+          const sbxData = finalizedBlocks.map((block) => {
+            const divClass = typeToDivClass[block.type] || "divtype2";
+            let text = block.text || "";
+            let extraAttributes = "";
+            if (block.type === "SCENE_HEADING") {
+              text = `${block.sceneType || "INT."} ${text} - ${block.timeOfDay || "DAY"}`.toUpperCase();
+              if (block.sceneNumber) {
+                extraAttributes = ` data-scene="${block.sceneNumber}"`;
+              }
+            } else if (block.type === "CHARACTER" || block.type === "TRANSITION") {
+              text = text.toUpperCase();
+            }
+            return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
+          }).join("");
+          options.onSave(sbxData);
+        }
         setTimeout(() => {
           var _a;
           const firstId = parsedBlocks[0].id;
@@ -1386,7 +1417,7 @@ function useScreenplayEditor(options) {
         }, 100);
       }
     },
-    [refs]
+    [refs, options == null ? void 0 : options.onSave]
   );
   const handleFocus = react.useCallback(
     (id) => {
@@ -1529,7 +1560,7 @@ function useScreenplayEditor(options) {
     loadFromUrl
   };
 }
-var handleSaveAsPdf = (blocks, sceneNumbers) => {
+var handleSaveAsPdf = (blocks, sceneNumbers, project_name) => {
   if (document.activeElement instanceof HTMLElement) {
     document.activeElement.blur();
   }
@@ -1614,9 +1645,13 @@ var handleSaveAsPdf = (blocks, sceneNumbers) => {
     }
     y += blockHeight;
   });
-  doc.save("screenplay_export.pdf");
+  if (project_name) {
+    doc.save(`${project_name}_${(/* @__PURE__ */ new Date()).toISOString()}.pdf`);
+  } else {
+    doc.save("screenplay_export.pdf");
+  }
 };
-var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
+var convertBlocksToSbx = (blocks, sceneNumbers) => {
   const typeToDivClass = {
     SCENE_HEADING: "divtype0",
     ACTION: "divtype2",
@@ -1626,7 +1661,7 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
     TRANSITION: "divtype6",
     GENERAL: "divtype2"
   };
-  const sbxData = blocks.map((block) => {
+  return blocks.map((block) => {
     const divClass = typeToDivClass[block.type] || "divtype2";
     let text = block.text || "";
     let extraAttributes = "";
@@ -1641,29 +1676,719 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
     }
     return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
   }).join("");
+};
+var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx, project_name) => {
+  const sbxData = convertBlocksToSbx(blocks, sceneNumbers);
   const blob = new Blob([sbxData], { type: "text/plain" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "screenplay.sbx";
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
   if (onSaveAsSbx) {
-    const file = new File([blob], "screenplay.sbx", { type: "text/plain" });
-    onSaveAsSbx(file);
+    if (project_name) {
+      const file = new File(
+        [blob],
+        `${project_name}_${(/* @__PURE__ */ new Date()).toISOString()}.sbx`,
+        { type: "text/plain" }
+      );
+      onSaveAsSbx(file);
+    } else {
+      const file = new File([blob], "screenplay.sbx", { type: "text/plain" });
+      onSaveAsSbx(file);
+    }
+  }
+};
+var handleSyncWithCloud = (blocks, sceneNumbers, onSyncWithCloud) => {
+  if (onSyncWithCloud) {
+    const sbxData = convertBlocksToSbx(blocks, sceneNumbers);
+    onSyncWithCloud(sbxData);
   }
 };
 
+// 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,
+  subLocations,
+  addSubLocation,
+  removeSubLocation,
+  sceneBrief,
+  setSceneBrief
+}) {
+  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";
+    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.jsxs("div", { className: "flex flex-col gap-4", 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: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md flex flex-col w-[210mm] shrink-0 p-8 md:p-12 lg:p-16", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-6 flex items-center gap-3 font-sans", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-100/80 shadow-inner border border-slate-200/50", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
+          "Scene Brief"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-zinc-50/50 border border-zinc-200/60 rounded-xl p-4 md:p-6 shadow-inner focus-within:bg-white focus-within:border-zinc-300 focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            value: sceneBrief,
+            onChange: (e) => setSceneBrief(e.target.value),
+            placeholder: "Write a brief description or notes for this scene...",
+            className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans",
+            style: {
+              lineHeight: "1.6"
+            }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8", 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,
+            cat.id === "LOCATION" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "ml-auto relative",
+                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 right-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"
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("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 === "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}`
+            ))
+          ] })
+        ] }, 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);
+  const [subLocations, setSubLocations] = react.useState([]);
+  const addSubLocation = react.useCallback(
+    (subLocation) => {
+      const trimmed = subLocation.trim();
+      if (trimmed && !subLocations.includes(trimmed)) {
+        setSubLocations((prev) => [...prev, trimmed]);
+      }
+    },
+    [subLocations]
+  );
+  const removeSubLocation = react.useCallback((subLocation) => {
+    setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
+  }, []);
+  const [sceneBrief, setSceneBrief] = react.useState("");
+  react.useEffect(() => {
+    setTags([]);
+    setSubLocations([]);
+    setSceneBrief("");
+    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,
+    subLocations,
+    addSubLocation,
+    removeSubLocation,
+    sceneBrief,
+    setSceneBrief
+  };
+}
+
+exports.CATEGORIES = CATEGORIES;
 exports.ScreenplayEditorView = ScreenplayEditorView;
+exports.ScriptBreakdownSceneView = ScriptBreakdownSceneView;
 exports.blockStyles = blockStyles;
 exports.blockTypes = blockTypes;
+exports.convertBlocksToSbx = convertBlocksToSbx;
 exports.handleSaveAsPdf = handleSaveAsPdf;
 exports.handleSaveAsSbx = handleSaveAsSbx;
+exports.handleSyncWithCloud = handleSyncWithCloud;
 exports.icons = icons;
 exports.timeOfDayOptions = timeOfDayOptions;
 exports.useScreenplayEditor = useScreenplayEditor;
+exports.useScriptBreakdownScene = useScriptBreakdownScene;
 exports.uuid = uuid;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map