@vishu1301/script-writing 1.0.5 → 1.0.6

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, Loader2, Tags } from 'lucide-react';
+import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, Upload, Save, FileDown, RefreshCcw, Cog, ArrowRight, User, ChevronRight, Loader2, AlignLeft, Tags, Plus, X } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as pdfjs from 'pdfjs-dist';
 import jsPDF from 'jspdf';
@@ -334,51 +334,127 @@ function ScreenplayEditorView({
     }
   }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ 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__ */ 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
-          );
-        })
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ 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 pointer-events-none",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200`,
+                            children: icons[type]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline tracking-wide", children: blockStyles[type].label })
+                      ]
+                    }
+                  )
+                ]
+              },
+              type
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
+            /* @__PURE__ */ jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsx(Upload, { className: "w-[18px] h-[18px]" }) }) }),
+            onSave && /* @__PURE__ */ 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__ */ jsx(Save, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            onSaveAsPdf && /* @__PURE__ */ 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__ */ jsx(FileDown, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            onSaveAsSbx && /* @__PURE__ */ 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__ */ jsx(RefreshCcw, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(Cog, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            isRulesOpen && /* @__PURE__ */ 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__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
+                "Settings & Shortcuts"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
+                /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
+                  /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
+                  /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
+                    /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
@@ -616,79 +692,7 @@ function ScreenplayEditorView({
           );
         })
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 flex flex-col items-end gap-4 z-50", children: [
-      /* @__PURE__ */ jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Upload, { className: "w-5 h-5" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Import" })
-      ] }) }),
-      onSave && /* @__PURE__ */ 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__ */ jsx(Save, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save" })
-          ]
-        }
-      ),
-      onSaveAsPdf && /* @__PURE__ */ 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__ */ jsx(FileDown, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save as PDF" })
-          ]
-        }
-      ),
-      onSaveAsSbx && /* @__PURE__ */ 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__ */ jsx(RefreshCcw, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save" })
-          ]
-        }
-      ),
-      isRulesOpen && /* @__PURE__ */ 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__ */ jsx("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsx("span", { children: "New Block" }),
-            /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsx("span", { children: "Delete Block" }),
-            /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-            /* @__PURE__ */ jsx("span", { children: "Change Type" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ 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__ */ jsx("span", { children: "+" }),
-              /* @__PURE__ */ 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__ */ 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__ */ jsx(Cog, { className: "w-5 h-5" })
-        }
-      )
-    ] })
+    ) })
   ] });
 }
 
@@ -1351,6 +1355,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;
@@ -1361,7 +1392,7 @@ function useScreenplayEditor(options) {
         }, 100);
       }
     },
-    [refs]
+    [refs, options == null ? void 0 : options.onSave]
   );
   const handleFocus = useCallback(
     (id) => {
@@ -1504,7 +1535,7 @@ function useScreenplayEditor(options) {
     loadFromUrl
   };
 }
-var handleSaveAsPdf = (blocks, sceneNumbers) => {
+var handleSaveAsPdf = (blocks, sceneNumbers, project_name) => {
   if (document.activeElement instanceof HTMLElement) {
     document.activeElement.blur();
   }
@@ -1589,9 +1620,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",
@@ -1601,7 +1636,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 = "";
@@ -1616,18 +1651,28 @@ 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);
   }
 };
 
@@ -1653,9 +1698,26 @@ function ScriptBreakdownSceneView({
   removeTag,
   clearSelection,
   menuPlacement,
-  menuRef
+  menuRef,
+  subLocations,
+  addSubLocation,
+  removeSubLocation,
+  sceneBrief,
+  setSceneBrief
 }) {
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
+  const [isSubLocOpen, setIsSubLocOpen] = useState(false);
+  const [subLocInput, setSubLocInput] = useState("");
+  const subLocPopoverRef = useRef(null);
+  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]);
   useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
@@ -1738,117 +1800,137 @@ function ScriptBreakdownSceneView({
     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" })
-                          ]
-                        }
-                      ) })
-                    ] })
-                  ]
-                }
-              )
-            ]
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", 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"
           },
-          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: [
+          "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: "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__ */ 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__ */ 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__ */ jsx(AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
+          "Scene Brief"
+        ] }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: /* @__PURE__ */ 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__ */ 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",
@@ -1870,20 +1952,93 @@ function ScriptBreakdownSceneView({
                 style: { backgroundColor: cat.hex }
               }
             ),
-            cat.label
+            cat.label,
+            cat.id === "LOCATION" && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "ml-auto relative",
+                ref: subLocPopoverRef,
+                children: [
+                  /* @__PURE__ */ 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__ */ jsx(Plus, { className: "w-3 h-3 text-slate-500" })
+                    }
+                  ),
+                  isSubLocOpen && /* @__PURE__ */ 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__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-2 px-1", children: "Add Sub Location" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+                      /* @__PURE__ */ 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__ */ 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__ */ 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
-          )) })
+          /* @__PURE__ */ jsxs("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 === "LOCATION" && subLocations.map((subLoc) => /* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "w-2.5 h-2.5" })
+                    }
+                  )
+                ]
+              },
+              `sub-${subLoc}`
+            ))
+          ] })
         ] }, 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({
@@ -2010,8 +2165,24 @@ function useScriptBreakdownScene(sceneNumber) {
   const autoTaggedSceneRef = useRef(null);
   const [menuPlacement, setMenuPlacement] = useState("top");
   const menuRef = useRef(null);
+  const [subLocations, setSubLocations] = useState([]);
+  const addSubLocation = useCallback(
+    (subLocation) => {
+      const trimmed = subLocation.trim();
+      if (trimmed && !subLocations.includes(trimmed)) {
+        setSubLocations((prev) => [...prev, trimmed]);
+      }
+    },
+    [subLocations]
+  );
+  const removeSubLocation = useCallback((subLocation) => {
+    setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
+  }, []);
+  const [sceneBrief, setSceneBrief] = useState("");
   useEffect(() => {
     setTags([]);
+    setSubLocations([]);
+    setSceneBrief("");
     autoTaggedSceneRef.current = null;
   }, [sceneNumber]);
   useEffect(() => {
@@ -2026,14 +2197,17 @@ function useScriptBreakdownScene(sceneNumber) {
           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)
+              (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),
+                text: block.text.substring(
+                  match.index,
+                  match.index + char.length
+                ),
                 startIndex: match.index,
                 endIndex: match.index + char.length
               });
@@ -2099,15 +2273,25 @@ function useScriptBreakdownScene(sceneNumber) {
   };
   const handleMouseUp = () => {
     const selection = window.getSelection();
-    if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
+    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;
+    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);
+    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();
@@ -2158,10 +2342,15 @@ function useScriptBreakdownScene(sceneNumber) {
     removeTag,
     clearSelection,
     menuPlacement,
-    menuRef
+    menuRef,
+    subLocations,
+    addSubLocation,
+    removeSubLocation,
+    sceneBrief,
+    setSceneBrief
   };
 }
 
-export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, blockStyles, blockTypes, handleSaveAsPdf, handleSaveAsSbx, icons, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, uuid };
+export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, blockStyles, blockTypes, convertBlocksToSbx, handleSaveAsPdf, handleSaveAsSbx, handleSyncWithCloud, icons, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, uuid };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map