@vishu1301/script-writing 1.5.8 → 1.6.0

package/dist/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var react = require('react');
+var React4 = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var pdfjs = require('pdfjs-dist');
 var jsPDF = require('jspdf');
 var html2canvas = require('html2canvas-pro');
-var Yup = require('yup');
 var formik = require('formik');
+var Yup = require('yup');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -29,6 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var pdfjs__namespace = /*#__PURE__*/_interopNamespace(pdfjs);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
@@ -76,12 +77,12 @@ var blockTypes = [
 ];
 var uuid = () => Math.random().toString(36).slice(2, 9);
 var icons = {
-  SCENE_HEADING: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "w-5 h-5" }),
-  ACTION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: "w-5 h-5" }),
-  CHARACTER: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-5 h-5" }),
-  PARENTHETICAL: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Parentheses, { className: "w-5 h-5" }),
-  DIALOGUE: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareText, { className: "w-5 h-5" }),
-  TRANSITION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownRight, { className: "w-5 h-5" })
+  SCENE_HEADING: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mountain, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
+  ACTION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clapperboard, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
+  CHARACTER: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
+  PARENTHETICAL: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Parentheses, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
+  DIALOGUE: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
+  TRANSITION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 })
 };
 var blockStyles = {
   SCENE_HEADING: {
@@ -816,10 +817,10 @@ function PhoneticSuggestions({
   ] });
 }
 pdfjs__namespace.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs__namespace.version}/build/pdf.worker.min.mjs`;
-function PdfImporter({ onScriptImported, disabled, children }) {
-  const [isProcessing, setIsProcessing] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const fileInputRef = react.useRef(null);
+function PdfImporter({ onScriptImported, disabled, children, className }) {
+  const [isProcessing, setIsProcessing] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const fileInputRef = React4.useRef(null);
   const handleFileChange = async (event) => {
     var _a;
     const file = (_a = event.target.files) == null ? void 0 : _a[0];
@@ -853,9 +854,9 @@ function PdfImporter({ onScriptImported, disabled, children }) {
           let divText = ((_a2 = div.textContent) == null ? void 0 : _a2.trim()) || "";
           if (!divText) return;
           let type = "ACTION";
-          for (const className of Array.from(div.classList)) {
-            if (typeMap[className]) {
-              type = typeMap[className];
+          for (const className2 of Array.from(div.classList)) {
+            if (typeMap[className2]) {
+              type = typeMap[className2];
               break;
             }
           }
@@ -959,7 +960,7 @@ function PdfImporter({ onScriptImported, disabled, children }) {
       {
         onClick: handleClick,
         disabled: isProcessing || disabled,
-        className: `flex items-center justify-center transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${isProcessing ? "w-auto px-3 sm:px-4 h-8 sm:h-10 rounded-full text-sm font-semibold bg-zinc-100 text-zinc-500" : "w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
+        className: className || `flex items-center justify-center transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${isProcessing ? "w-auto px-3 sm:px-4 h-8 sm:h-10 rounded-full text-sm font-semibold bg-zinc-100 text-zinc-500" : "w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
         "aria-label": "Import Script",
         children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-semibold", children: "Processing..." }) : children
       }
@@ -975,12 +976,12 @@ function PhoneticGuide({
   isOpen,
   onClose
 }) {
-  const [activeTab, setActiveTab] = react.useState("vowels");
-  const [searchQuery, setSearchQuery] = react.useState("");
+  const [activeTab, setActiveTab] = React4.useState("vowels");
+  const [searchQuery, setSearchQuery] = React4.useState("");
   const script = language.includes("Hindi") ? "Hindi" : "Gujarati";
   const vowelsData = VOWEL_FORMS[script] || {};
   const config = LANGUAGE_CONFIGS[language];
-  const consonants = react.useMemo(() => {
+  const consonants = React4.useMemo(() => {
     if (!config || language === "English") return [];
     return Object.entries(config.mapping).filter(([_, val]) => {
       const isVowelMatra = Object.values(vowelsData).some(
@@ -994,7 +995,7 @@ function PhoneticGuide({
       shiftChar: val.shift
     }));
   }, [language, vowelsData, config]);
-  const symbols = react.useMemo(() => {
+  const symbols = React4.useMemo(() => {
     if (!config || language === "English") return [];
     return Object.entries(config.mapping).filter(([_, val]) => /[.,/;:'"\[\]{}\\=`\-_]/.test(val.default)).map(([key, val]) => ({
       key: key.replace("Key", "").toLowerCase(),
@@ -1243,6 +1244,44 @@ function PhoneticGuide({
     }
   );
 }
+function Tooltip({
+  children,
+  content,
+  shortcut,
+  align = "center"
+}) {
+  const alignClasses = {
+    center: "left-1/2 -translate-x-1/2 items-center",
+    left: "left-0 items-start",
+    right: "right-0 items-end"
+  };
+  const arrowClasses = {
+    center: "",
+    left: "left-3.5",
+    right: "right-3.5"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative flex items-center justify-center", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `absolute top-[calc(100%+8px)] scale-95 opacity-0 pointer-events-none group-hover:scale-100 group-hover:opacity-100 transition-all duration-150 ease-out z-[100] flex flex-col ${alignClasses[align]}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `w-2 h-2 rotate-45 bg-blumine-950 border-l border-t border-white/10 -mb-1 shadow-sm ${align === "center" ? "" : "relative"} ${arrowClasses[align]}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blumine-950/95 text-white text-[11px] font-medium px-2.5 py-1.5 rounded-lg shadow-xl border border-white/10 backdrop-blur-sm whitespace-nowrap flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: content }),
+            shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "bg-blumine-800 text-[10px] text-blumine-300 px-1.5 py-0.5 rounded border border-zinc-700 font-sans font-semibold", children: shortcut })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 function ScreenplayEditorView({
   blocks,
   refs,
@@ -1284,15 +1323,16 @@ function ScreenplayEditorView({
   currentLanguage,
   setCurrentLanguage,
   phoneticSuggestions,
-  handleSelectPhoneticSuggestion
+  handleSelectPhoneticSuggestion,
+  autosaveStatus
 }) {
-  const [isRulesOpen, setIsRulesOpen] = react.useState(false);
-  const [isLanguageOpen, setIsLanguageOpen] = react.useState(false);
-  const [isPhoneticGuideOpen, setIsPhoneticGuideOpen] = react.useState(false);
-  const rulesRef = react.useRef(null);
-  const languageRef = react.useRef(null);
+  const [isRulesOpen, setIsRulesOpen] = React4.useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = React4.useState(false);
+  const [isPhoneticGuideOpen, setIsPhoneticGuideOpen] = React4.useState(false);
+  const rulesRef = React4.useRef(null);
+  const languageRef = React4.useRef(null);
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const handleClickOutside = (event) => {
       if (rulesRef.current && !rulesRef.current.contains(event.target)) {
         setIsRulesOpen(false);
@@ -1308,7 +1348,7 @@ function ScreenplayEditorView({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isRulesOpen, isLanguageOpen]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
     if (!document.getElementById(fontId)) {
@@ -1334,168 +1374,299 @@ function ScreenplayEditorView({
       document.head.appendChild(style);
     }
   }, [COURIER_STACK]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-white/80 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 text-zinc-400 animate-spin" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-zinc-500 text-sm font-medium", children: "Loading script..." })
-    ] }) });
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-2 sm:top-6 z-50 mx-auto w-full max-w-[1037px] rounded-[2.5rem] sm:rounded-[2rem] bg-gradient-to-b from-white/90 to-white/70 border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.06),0_2px_8px_rgba(16,37,54,0.03)] backdrop-blur-xl flex items-center justify-between px-2 py-1.5 sm:px-3 sm:py-2 mb-6 sm:mb-12 select-none transition-all", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 overflow-x-auto pr-2 flex-1 no-scrollbar rounded-full p-1 bg-gradient-to-b from-white/80 to-blumine-50 border border-blumine-200 shadow-inner", children: blockTypes.map((type) => {
+    isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-blumine-500/40 backdrop-blur-md p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes gpu-spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+            .gpu-spinner-container {
+              transform: translate3d(0,0,0);
+              will-change: transform;
+            }
+            .gpu-spinner {
+              width: 32px;
+              height: 32px;
+              border: 3.5px solid rgba(255, 255, 255, 0.25);
+              border-top-color: #ffffff;
+              border-radius: 50%;
+              animation: gpu-spin 0.85s linear infinite;
+              will-change: transform;
+              transform: translate3d(0,0,0);
+            }
+          ` }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full border-2 border-white border-dashed rounded-[2.5rem] flex items-center justify-center gpu-spinner-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gpu-spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-lg font-semibold mt-4", children: "Preparing Script..." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-xs font-medium mt-2", children: "Please wait while we prepare your screenplay." }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/80 text-xs mt-2", children: "Status: Arranging data..." })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 left-0 right-0 z-50 w-full bg-zinc-50/95 backdrop-blur-md border-b border-zinc-200/60 shadow-[0_1px_2px_rgba(0,0,0,0.01)] flex flex-wrap lg:flex-nowrap items-center justify-between px-3 sm:px-6 py-2 mb-8 select-none transition-all gap-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 w-auto shrink-0 order-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold tracking-wider text-blumine-400/80 uppercase", children: "Script Editor" }),
+        autosaveStatus === "saved" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100/50 animate-in fade-in duration-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Script synced" })
+        ] }),
+        autosaveStatus === "saving" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-blue-50 text-blue-600 border border-blue-100/50 animate-in fade-in duration-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-2.5 h-2.5 animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Saving..." })
+        ] }),
+        autosaveStatus === "typing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-amber-50 text-amber-600 border border-amber-100/50 animate-in fade-in duration-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Drafting..." })
+        ] }),
+        autosaveStatus === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-rose-50 text-rose-600 border border-rose-100/50 animate-in fade-in duration-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Error saving" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1 sm:gap-2 basis-full lg:basis-auto flex-initial min-w-0 py-1 lg:py-0.5 order-3 lg:order-2", 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",
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Tooltip,
           {
-            type: "button",
-            disabled: isLocked,
-            onClick: () => handleBlockTypeChange(type),
-            className: `group w-fit flex shrink-0 items-center gap-2 px-3 sm:px-4 h-[40px] sm:h-[42px] rounded-full font-medium text-xs sm:text-sm transition-all duration-200 ease-out active:scale-95 whitespace-nowrap ${selected ? "bg-gradient-to-b from-white to-blumine-100 text-blumine-500 shadow-[0_6px_14px_rgba(24,88,122,0.15)] border border-blumine-200" : "text-blumine-500 hover:bg-white"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: `flex items-center justify-center transition-opacity duration-200 ${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"}`,
-                  children: icons[type]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline tracking-wide", children: blockStyles[type].label })
-            ]
+            content: blockStyles[type].label,
+            shortcut: "Ctrl + \u2191/\u2193",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isLocked,
+                onClick: () => handleBlockTypeChange(type),
+                className: `w-8 h-8 sm:w-9 sm:h-9 flex shrink-0 items-center justify-center rounded-lg transition-all duration-150 ease-out active:scale-95 whitespace-nowrap ${selected ? "bg-blumine-200/60 text-blumine-800 shadow-sm border border-blumine-200/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: `flex items-center justify-center transition-all duration-150 ${selected ? "scale-105 opacity-100" : "opacity-80 hover:opacity-100"}`,
+                    children: icons[type]
+                  }
+                )
+              }
+            )
           },
           type
         );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0 ml-2 sm:ml-0 pl-2 sm:pl-1 border-l sm:border-none border-blumine-200/70", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-[1px] h-6 bg-blumine-200 rounded-full mx-1" }),
-        showPdfImport && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
-          PdfImporter,
-          {
-            disabled: isLocked,
-            onScriptImported: handleScriptImport,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) })
-          }
-        ),
-        onToggleLock && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onToggleLock,
-            className: `w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full transition-all duration-200 active:scale-95 ${isLocked ? "text-rose-500 bg-rose-50/60" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
-            children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
-          }
-        ),
-        onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 sm:gap-1.5 w-auto lg:w-[220px] shrink-0 order-2 lg:order-3", children: [
+        onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Save changes", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: onSave,
-            className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
-          }
-        ),
-        onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onSaveAsPdf,
-            className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+            className: "w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700 transition active:scale-95",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.Save,
+              {
+                className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                strokeWidth: 1.5
+              }
+            )
           }
-        ),
-        onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        ) }),
+        onToggleLock && /* @__PURE__ */ jsxRuntime.jsx(
+          Tooltip,
           {
-            onClick: onSyncWithCloud,
-            className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+            content: isLocked ? "Unlock Screenplay" : "Lock Screenplay",
+            align: "right",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onToggleLock,
+                className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition active:scale-95 ${isLocked ? "text-rose-500 hover:bg-rose-50 hover:text-rose-700 bg-rose-50/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
+                children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.Lock,
+                  {
+                    className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                    strokeWidth: 1.5
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.Unlock,
+                  {
+                    className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                    strokeWidth: 1.5
+                  }
+                )
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Settings & Actions", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: () => setIsRulesOpen(!isRulesOpen),
-              className: `w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-gradient-to-b from-white to-blumine-100 text-blumine-500 shadow-md border border-blumine-100" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+              className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-blumine-200/60 text-blumine-800 shadow-sm border border-blumine-200/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Cog,
+                {
+                  className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                  strokeWidth: 1.5
+                }
+              )
             }
-          ),
-          isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute -right-2 top-[calc(100%+14px)] w-[332px] max-w-[90vw] p-3 rounded-[24px] bg-white border border-blumine-200/70 shadow-[0_18px_40px_rgba(16,37,54,0.08),0_3px_10px_rgba(16,37,54,0.04)] backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 right-5 w-4 h-4 rotate-45 bg-white border-l border-t border-blumine-200/70" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-xl bg-gradient-to-b from-white to-blumine-50 text-blumine-500 border border-blumine-200/70 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4" }) }),
+          ) }),
+          isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[360px] max-w-[90vw] p-4 rounded-2xl bg-white border border-blumine-200 shadow-2xl backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1.5 right-3.5 w-3 h-3 rotate-45 bg-white border-l border-t border-blumine-200" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-4 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-xl bg-gradient-to-b from-white to-blumine-50/50 text-blumine-600 border border-blumine-200 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[15px] font-semibold text-blumine-900 leading-tight", children: "Settings & Shortcuts" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-blumine-500 mt-1", children: "Writing flow & editor controls" })
+                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[15px] font-semibold text-blumine-800 leading-tight", children: "Settings & Actions" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-blumine-400 mt-1", children: "Screenplay controls & keyboard shortcuts" })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
-              {
-                title: "New Block",
-                desc: "Insert the next section",
-                key: ["Enter"]
-              },
-              {
-                title: "Delete Block",
-                desc: "Remove selected section",
-                key: ["Backspace \u{1F860}"]
-              },
-              {
-                title: "Change Type",
-                desc: "Cycle block styles",
-                key: ["Ctrl", "+", "\u2191/\u2193"]
-              }
-            ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between gap-4 p-3 rounded-[18px] bg-gradient-to-b from-white to-blumine-50/50 border border-blumine-200/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blumine-800", children: item.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-blumine-500 truncate", children: item.desc })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0", children: item.key.map(
-                    (k, i) => k === "+" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: "text-blumine-400 text-xs font-semibold",
-                        children: "+"
-                      },
-                      i
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "kbd",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-blumine-400 uppercase tracking-wider", children: "Document Actions" }) }),
+              showPdfImport && /* @__PURE__ */ jsxRuntime.jsx(
+                PdfImporter,
+                {
+                  disabled: isLocked,
+                  onScriptImported: (title, content, preParsedBlocks) => {
+                    handleScriptImport(title, content, preParsedBlocks);
+                    setIsRulesOpen(false);
+                  },
+                  className: "w-full text-left",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: `w-full flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200 cursor-pointer ${isLocked ? "opacity-60 cursor-not-allowed pointer-events-none" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-lg bg-blumine-50 text-blumine-600 border border-blumine-100 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-left", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: "Import PDF" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: isLocked ? "Unlock screenplay to import files" : "Load screenplay from external file" })
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              ),
+              onToggleLock && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    onToggleLock();
+                  },
+                  className: "w-full text-left flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
                       {
-                        className: "min-w-[28px] px-2 py-1 text-[11px] font-bold text-primary bg-gradient-to-b from-white to-blumine-100 border border-blumine-200/70 rounded-full text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]",
-                        children: k
-                      },
-                      i
-                    )
-                  ) })
-                ]
-              },
-              item.title
-            )) })
+                        className: `w-8 h-8 flex items-center justify-center rounded-lg shrink-0 border ${isLocked ? "bg-rose-50 text-rose-500 border-rose-100/50" : "bg-blumine-50 text-blumine-600 border-blumine-100/50"}`,
+                        children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-4 h-4", strokeWidth: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-4 h-4", strokeWidth: 1.5 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: isLocked ? "Unlock Screenplay" : "Lock Screenplay" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: isLocked ? "Enable editing controls" : "Prevent accidental editing" })
+                    ] })
+                  ]
+                }
+              ),
+              onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    onSaveAsPdf();
+                    setIsRulesOpen(false);
+                  },
+                  className: "w-full text-left flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-lg bg-blumine-50 text-blumine-600 border border-blumine-100 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: "Save as PDF" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: "Export screenplay to standard print PDF" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-blumine-100/60 my-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-blumine-400 uppercase tracking-wider", children: "Keyboard Shortcuts" }) }),
+              [
+                {
+                  title: "New Block",
+                  desc: "Insert the next section",
+                  key: ["Enter"]
+                },
+                {
+                  title: "Delete Block",
+                  desc: "Remove selected section",
+                  key: ["Backspace \u{1F860}"]
+                },
+                {
+                  title: "Change Type",
+                  desc: "Cycle block styles",
+                  key: ["Ctrl", "+", "\u2191/\u2193"]
+                }
+              ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-4 p-2.5 rounded-xl bg-gradient-to-b from-white to-blumine-50/30 border border-blumine-100/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 text-left", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-blumine-800", children: item.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-blumine-400 truncate mt-0.5", children: item.desc })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0", children: item.key.map(
+                      (k, i) => k === "+" ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "text-blumine-400 text-xs font-semibold",
+                          children: "+"
+                        },
+                        i
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "kbd",
+                        {
+                          className: "min-w-[28px] px-2 py-1 text-[11px] font-bold text-blumine-700 bg-gradient-to-b from-white to-blumine-100 border border-blumine-200 rounded-lg text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]",
+                          children: k
+                        },
+                        i
+                      )
+                    ) })
+                  ]
+                },
+                item.title
+              ))
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: languageRef,
-            className: "flex items-center pl-1.5 border-l border-blumine-200/70",
+            className: "relative flex items-center pl-1.5 border-l border-blumine-200",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Tooltip,
                 {
-                  onClick: () => setIsLanguageOpen(!isLanguageOpen),
-                  className: `flex items-center gap-2 pr-4 pl-2 h-9 sm:h-10 rounded-full transition-all duration-200 active:scale-95 ${isLanguageOpen ? "bg-blumine-50 text-blumine-600 shadow-sm" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 flex items-center justify-center rounded-full bg-white shadow-sm border border-blumine-100", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "w-3.5 h-3.5" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold whitespace-nowrap", children: LANGUAGE_CONFIGS[currentLanguage].name })
-                  ]
+                  content: `Input Language: ${LANGUAGE_CONFIGS[currentLanguage].name}`,
+                  align: "right",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setIsLanguageOpen(!isLanguageOpen),
+                      className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition-all duration-200 active:scale-95 ${isLanguageOpen ? "bg-blumine-200/60 text-blumine-800 border border-blumine-200 shadow-sm" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.Languages,
+                        {
+                          className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                          strokeWidth: 1.5
+                        }
+                      )
+                    }
+                  )
                 }
               ),
-              isLanguageOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[400px] max-w-[90vw] p-3 rounded-[24px] bg-white border border-blumine-200/70 shadow-[0_18px_40px_rgba(16,37,54,0.08)] backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 right-12 w-4 h-4 rotate-45 bg-white border-l border-t border-blumine-200/70" }),
+              isLanguageOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[400px] max-w-[90vw] p-3 rounded-2xl bg-white border border-blumine-200 shadow-xl backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1.5 right-3.5 w-3 h-3 rotate-45 bg-white border-l border-t border-blumine-200" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 mb-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[13px] font-bold text-blumine-900 uppercase tracking-wider", children: "Select Input Language" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-blumine-500 mt-0.5", children: "Direct keyboard mapping (InScript logic)" })
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[13px] font-bold text-blumine-800 uppercase tracking-wider", children: "Select Input Language" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-blumine-400 mt-0.5", children: "Direct keyboard mapping (InScript logic)" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5 max-h-[300px] overflow-y-auto pr-1 flex-1 custom-scrollbar", children: Object.keys(LANGUAGE_CONFIGS).map(
                   (lang) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1505,16 +1676,16 @@ function ScreenplayEditorView({
                         setCurrentLanguage(lang);
                         setIsLanguageOpen(false);
                       },
-                      className: `group flex items-center justify-between px-3.5 py-2.5 rounded-[16px] transition-all duration-200 ${currentLanguage === lang ? "bg-gradient-to-br from-blumine-50 to-white border border-blumine-200/50 shadow-sm" : "hover:bg-zinc-50 border border-transparent"}`,
+                      className: `group flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all duration-200 ${currentLanguage === lang ? "bg-blumine-100/80 text-blumine-800 border border-blumine-200/50 shadow-sm" : "hover:bg-blumine-50 border border-transparent"}`,
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
                           {
-                            className: `text-sm font-medium ${currentLanguage === lang ? "text-blumine-600" : "text-zinc-600"}`,
+                            className: `text-sm font-medium ${currentLanguage === lang ? "text-blumine-800 font-semibold" : "text-blumine-500"}`,
                             children: LANGUAGE_CONFIGS[lang].name
                           }
                         ),
-                        currentLanguage === lang && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-blumine-500 flex items-center justify-center text-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3" }) })
+                        currentLanguage === lang && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-blumine-700 flex items-center justify-center text-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3", strokeWidth: 2 }) })
                       ]
                     },
                     lang
@@ -1524,15 +1695,20 @@ function ScreenplayEditorView({
             ]
           }
         ),
-        LANGUAGE_CONFIGS[currentLanguage].isPhonetic && /* @__PURE__ */ jsxRuntime.jsx(
+        LANGUAGE_CONFIGS[currentLanguage].isPhonetic && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Phonetic Keyboard Rules", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => setIsPhoneticGuideOpen(true),
-            className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95 ml-1",
-            title: "Phonetic Keyboard Rules",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+            className: "w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700 transition active:scale-95 ml-1",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.Keyboard,
+              {
+                className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
+                strokeWidth: 1.5
+              }
+            )
           }
-        )
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1543,7 +1719,7 @@ function ScreenplayEditorView({
         onClose: () => setIsPhoneticGuideOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center px-4 sm:px-6 md:px-8", 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-[297mm] shrink-0",
@@ -1556,346 +1732,370 @@ function ScreenplayEditorView({
         },
         "data-screenplay-editor": "true",
         dir: LANGUAGE_CONFIGS[currentLanguage].dir,
-        children: blocks.map((block) => {
-          var _a, _b;
-          return /* @__PURE__ */ jsxRuntime.jsx(
+        children: blocks.map((block) => /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenplayBlockItem,
+          {
+            block,
+            isFocused: focusedBlockId === block.id,
+            isLocked,
+            showSuggestions,
+            showExtensionSuggestions,
+            locations,
+            characters,
+            phoneticSuggestions,
+            characterExtensions,
+            enhancingBlockId,
+            enhancementSuggestion,
+            isEnhancing,
+            currentLanguage,
+            refs,
+            handleSceneNumberChange,
+            handleSceneTypeChange,
+            handleTimeOfDayChange,
+            handleBlockTextChange,
+            handleKeyDown,
+            handleFocus,
+            handleBlur,
+            handleSelectPhoneticSuggestion,
+            handleSelectCharacterExtension,
+            handleEnhance,
+            handleApproveEnhance,
+            handleRejectEnhance
+          },
+          block.id + "-" + block.type
+        ))
+      }
+    ) })
+  ] });
+}
+var ScreenplayBlockItem = React4__default.default.memo(
+  function ScreenplayBlockItem2({
+    block,
+    isFocused,
+    isLocked,
+    showSuggestions,
+    showExtensionSuggestions,
+    locations,
+    characters,
+    phoneticSuggestions,
+    characterExtensions,
+    enhancingBlockId,
+    enhancementSuggestion,
+    isEnhancing,
+    currentLanguage,
+    refs,
+    handleSceneNumberChange,
+    handleSceneTypeChange,
+    handleTimeOfDayChange,
+    handleBlockTextChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    handleSelectPhoneticSuggestion,
+    handleSelectCharacterExtension,
+    handleEnhance,
+    handleApproveEnhance,
+    handleRejectEnhance
+  }) {
+    var _a, _b;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-block-id": block.id,
+        className: `relative rounded-sm transition-all duration-200 outline-none ${isFocused ? "bg-zinc-100/50" : "bg-transparent"}`,
+        "data-block-type": block.type,
+        children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none bg-transparent outline-none focus:ring-1 focus:ring-blue-400 rounded-sm",
+                spellCheck: false,
+                disabled: isLocked,
+                value: block.sceneNumber || "",
+                onChange: (e) => handleSceneNumberChange(
+                  block.id,
+                  e.target.value.toUpperCase()
+                ),
+                onFocus: () => handleFocus(block.id),
+                onBlur: () => handleBlur(block.id),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === "Backspace") {
+                    e.stopPropagation();
+                  }
+                },
+                "aria-label": "Scene Number"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer w-fit transition-colors",
+                "aria-label": "Scene Type",
+                disabled: isLocked,
+                value: (_a = block.sceneType) != null ? _a : "INT.",
+                onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
+                style: {
+                  appearance: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { children: "EXT." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT/EXT." })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: (el) => {
+                  if (!el) return;
+                  refs.current[block.id] = el;
+                },
+                contentEditable: !isLocked,
+                suppressContentEditableWarning: true,
+                "aria-label": `Scene Heading: ${block.text}`,
+                "aria-haspopup": "listbox",
+                "aria-expanded": isFocused && showSuggestions && locations.length > 0,
+                spellCheck: false,
+                className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
+                style: {
+                  minWidth: "3rem"
+                },
+                onInput: (e) => handleBlockTextChange(
+                  block.id,
+                  e.target.innerText
+                ),
+                onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
+                onFocus: () => handleFocus(block.id),
+                onBlur: () => handleBlur(block.id)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer transition-colors",
+                "aria-label": "Time of Day",
+                disabled: isLocked,
+                value: (_b = block.timeOfDay) != null ? _b : "DAY",
+                style: {
+                  appearance: "none"
+                },
+                onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
+                children: timeOfDayOptions.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: t }, t))
+              }
+            )
+          ] }),
+          isFocused && showSuggestions && locations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              "data-block-id": block.id,
-              className: `relative rounded-sm transition-all duration-200 outline-none ${focusedBlockId === block.id ? "bg-zinc-100/50" : "bg-transparent"}`,
-              "data-block-type": block.type,
-              children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none bg-transparent outline-none focus:ring-1 focus:ring-blue-400 rounded-sm",
-                      spellCheck: false,
-                      disabled: isLocked,
-                      value: block.sceneNumber || "",
-                      onChange: (e) => handleSceneNumberChange(
-                        block.id,
-                        e.target.value.toUpperCase()
-                      ),
-                      onFocus: () => handleFocus(block.id),
-                      onBlur: () => handleBlur(block.id),
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === "Backspace") {
-                          e.stopPropagation();
-                        }
-                      },
-                      "aria-label": "Scene Number"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "select",
-                    {
-                      className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer w-fit transition-colors",
-                      "aria-label": "Scene Type",
-                      disabled: isLocked,
-                      value: (_a = block.sceneType) != null ? _a : "INT.",
-                      onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
-                      style: {
-                        appearance: "none"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT." }),
-                        /* @__PURE__ */ jsxRuntime.jsx("option", { children: "EXT." }),
-                        /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT/EXT." })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      ref: (el) => {
-                        if (!el) return;
-                        refs.current[block.id] = el;
-                      },
-                      contentEditable: !isLocked,
-                      suppressContentEditableWarning: true,
-                      "aria-label": `Scene Heading: ${block.text}`,
-                      "aria-haspopup": "listbox",
-                      "aria-expanded": focusedBlockId === block.id && showSuggestions && locations.length > 0,
-                      spellCheck: false,
-                      className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
-                      style: {
-                        minWidth: "3rem"
-                      },
-                      onInput: (e) => handleBlockTextChange(
-                        block.id,
-                        e.target.innerText
-                      ),
-                      onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
-                      onFocus: () => handleFocus(block.id),
-                      onBlur: () => handleBlur(block.id)
+              role: "listbox",
+              id: `suggestions-${block.id}`,
+              className: "absolute top-[calc(100%+6px)] left-0 min-w-[240px] z-50 bg-white border border-slate-200/80 shadow-xl shadow-slate-200/40 rounded-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-150",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
+                (loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
+              ).map((loc) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "option",
+                  className: "group flex items-center justify-between px-4 py-2.5 cursor-pointer transition-all duration-150 hover:bg-slate-50 active:bg-slate-100",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    const element = refs.current[block.id];
+                    if (element) {
+                      element.innerText = loc;
+                      handleBlockTextChange(block.id, loc);
+                      element.focus();
+                      const range = document.createRange();
+                      const sel = window.getSelection();
+                      range.selectNodeContents(element);
+                      range.collapse(false);
+                      sel == null ? void 0 : sel.removeAllRanges();
+                      sel == null ? void 0 : sel.addRange(range);
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "select",
-                    {
-                      className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer transition-colors",
-                      "aria-label": "Time of Day",
-                      disabled: isLocked,
-                      value: (_b = block.timeOfDay) != null ? _b : "DAY",
-                      style: {
-                        appearance: "none"
-                      },
-                      onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
-                      children: timeOfDayOptions.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: t }, t))
+                    handleBlur(block.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-3.5 h-3.5 text-slate-300 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" })
+                  ]
+                },
+                loc
+              )) })
+            }
+          ),
+          isFocused && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            PhoneticSuggestions,
+            {
+              suggestions: phoneticSuggestions,
+              onSelect: handleSelectPhoneticSuggestion
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: (el) => {
+                if (!el) return;
+                refs.current[block.id] = el;
+              },
+              contentEditable: !isLocked,
+              suppressContentEditableWarning: true,
+              "aria-label": `${blockStyles[block.type].label} text`,
+              "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
+              spellCheck: false,
+              className: `block outline-none w-full min-h-[2.5rem] px-4 py-2 break-words ${blockStyles[block.type].className}`,
+              onInput: (e) => handleBlockTextChange(
+                block.id,
+                e.target.innerText
+              ),
+              onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
+              onFocus: () => handleFocus(block.id),
+              onBlur: () => handleBlur(block.id),
+              style: blockStyles[block.type].inputStyle
+            }
+          ),
+          isFocused && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "listbox",
+              id: `suggestions-${block.id}`,
+              className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
+                (char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
+              ).map((char) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "option",
+                  className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    const element = refs.current[block.id];
+                    if (element) {
+                      element.innerText = char;
+                      handleBlockTextChange(block.id, char);
+                      element.focus();
+                      const range = document.createRange();
+                      const sel = window.getSelection();
+                      range.selectNodeContents(element);
+                      range.collapse(false);
+                      sel == null ? void 0 : sel.removeAllRanges();
+                      sel == null ? void 0 : sel.addRange(range);
                     }
-                  )
-                ] }),
-                focusedBlockId === block.id && showSuggestions && locations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    role: "listbox",
-                    id: `suggestions-${block.id}`,
-                    className: "absolute top-[calc(100%+6px)] left-0 min-w-[240px] z-50 bg-white border border-slate-200/80 shadow-xl shadow-slate-200/40 rounded-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-150",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
-                      (loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
-                    ).map((loc) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        role: "option",
-                        className: "group flex items-center justify-between px-4 py-2.5 cursor-pointer transition-all duration-150 hover:bg-slate-50 active:bg-slate-100",
-                        onMouseDown: (e) => {
-                          e.preventDefault();
-                          const element = refs.current[block.id];
-                          if (element) {
-                            element.innerText = loc;
-                            handleBlockTextChange(block.id, loc);
-                            element.focus();
-                            const range = document.createRange();
-                            const sel = window.getSelection();
-                            range.selectNodeContents(element);
-                            range.collapse(false);
-                            sel == null ? void 0 : sel.removeAllRanges();
-                            sel == null ? void 0 : sel.addRange(range);
-                          }
-                          handleBlur(block.id);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-3.5 h-3.5 text-slate-300 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" })
-                        ]
-                      },
-                      loc
-                    )) })
-                  }
-                ),
-                focusedBlockId === block.id && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                  PhoneticSuggestions,
-                  {
-                    suggestions: phoneticSuggestions,
-                    onSelect: handleSelectPhoneticSuggestion
-                  }
-                )
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    ref: (el) => {
-                      if (!el) return;
-                      refs.current[block.id] = el;
-                    },
-                    contentEditable: !isLocked,
-                    suppressContentEditableWarning: true,
-                    "aria-label": `${blockStyles[block.type].label} text`,
-                    "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
-                    spellCheck: false,
-                    className: `block outline-none w-full min-h-[2.5rem] px-4 py-2 break-words ${blockStyles[block.type].className}`,
-                    onInput: (e) => handleBlockTextChange(
-                      block.id,
-                      e.target.innerText
-                    ),
-                    onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
-                    onFocus: () => handleFocus(block.id),
-                    onBlur: () => handleBlur(block.id),
-                    style: blockStyles[block.type].inputStyle
-                  }
-                ),
-                focusedBlockId === block.id && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    role: "listbox",
-                    id: `suggestions-${block.id}`,
-                    className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
-                      (char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
-                    ).map((char) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        role: "option",
-                        className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
-                        onMouseDown: (e) => {
-                          e.preventDefault();
-                          const element = refs.current[block.id];
-                          if (element) {
-                            element.innerText = char;
-                            handleBlockTextChange(block.id, char);
-                            element.focus();
-                            const range = document.createRange();
-                            const sel = window.getSelection();
-                            range.selectNodeContents(element);
-                            range.collapse(false);
-                            sel == null ? void 0 : sel.removeAllRanges();
-                            sel == null ? void 0 : sel.addRange(range);
-                          }
-                          handleBlur(block.id);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-blumine-500 transition-colors mr-3" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
-                        ]
-                      },
-                      char
-                    )) })
-                  }
-                ),
-                focusedBlockId === block.id && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    role: "listbox",
-                    id: `extension-suggestions-${block.id}`,
-                    className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
-                      const openParenIndex = block.text.lastIndexOf("(");
-                      const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
-                      return ext.toUpperCase().includes(query);
-                    }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        role: "option",
-                        className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
-                        onMouseDown: (e) => {
-                          e.preventDefault();
-                          handleSelectCharacterExtension(ext);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
-                        ]
-                      },
-                      ext
-                    )) })
-                  }
-                ),
-                focusedBlockId === block.id && !enhancingBlockId && (block.type === "ACTION" || block.type === "DIALOGUE") && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    onClick: () => handleEnhance(block),
-                    className: "absolute -right-12 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-xl border border-blumine-200/50 bg-white text-blumine-500 hover:border-blumine-400/60 hover:bg-blumine-50/90 hover:ring-2 hover:ring-blumine-100 hover:scale-105 active:scale-95 transition-all duration-200 group/enhance animate-in fade-in slide-in-from-left-2",
-                    title: "Enhance with AI",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 group-hover/enhance:animate-pulse transition-colors" })
-                  }
-                ),
-                enhancingBlockId === block.id && (enhancementSuggestion || isEnhancing) && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: "absolute left-0 right-0 -top-4 -translate-y-full z-[50] animate-in fade-in zoom-in-95 slide-in-from-bottom-4 duration-300",
-                    style: { width: "calc(100% + 2rem)", left: "-1rem" },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full rounded-[2rem] bg-white border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.1),0_2px_8px_rgba(16,37,54,0.05)] backdrop-blur-xl p-2 select-none transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-full bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4" }) }),
-                            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-bold text-zinc-900 uppercase tracking-wider leading-none", children: "AI Suggestion" }),
-                              !isEnhancing && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-zinc-500 mt-1 font-medium", children: "Refining your screenplay dialogue" })
-                            ] })
-                          ] }),
-                          !isEnhancing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "button",
-                              {
-                                onClick: handleRejectEnhance,
-                                className: "px-3 py-2 rounded-full text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95",
-                                children: "Discard"
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsxs(
-                              "button",
-                              {
-                                onClick: handleApproveEnhance,
-                                className: "px-4 py-2 rounded-full text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/20 transition-all active:scale-95 flex items-center gap-1.5",
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5" }),
-                                  "Apply Changes"
-                                ]
-                              }
-                            )
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[1.25rem] bg-zinc-50/50 border border-zinc-100 p-4 min-h-[4rem]", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 py-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-3/4 bg-zinc-200/60 animate-pulse rounded-full" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-1/2 bg-zinc-200/60 animate-pulse rounded-full" })
-                        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-400 line-through decoration-zinc-300 italic", children: block.text }),
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-800 font-medium leading-relaxed", children: enhancementSuggestion })
-                        ] }) })
-                      ] }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white border-r border-b border-zinc-200/50 rotate-45" })
-                    ]
-                  }
-                ),
-                focusedBlockId === block.id && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                  PhoneticSuggestions,
-                  {
-                    suggestions: phoneticSuggestions,
-                    onSelect: handleSelectPhoneticSuggestion
-                  }
-                )
-              ] })
-            },
-            block.id + "-" + block.type
-          );
-        })
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `fixed bottom-10  -translate-x-1/2 z-[100] w-full max-w-[95%] sm:max-w-2xl transition-all duration-500 ease-in-out ${showUnsavedPopover ? "translate-y-0 opacity-100 scale-100" : "translate-y-12 opacity-0 scale-95 pointer-events-none"}`,
-        style: {
-          left: savePopOverLeft
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto rounded-[2.5rem] bg-white/95 border border-white/60 shadow-[0_20px_50px_rgba(16,37,54,0.12),0_4px_12px_rgba(16,37,54,0.05)] backdrop-blur-2xl flex items-center justify-between px-2 py-1.5 sm:px-4 sm:py-2.5 select-none transition-all hover:shadow-[0_25px_60px_rgba(16,37,54,0.18)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-[2.5rem] bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-5 h-5" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-zinc-900 leading-none", children: "Unsaved Changes" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-zinc-500 mt-1 font-medium", children: "You have changes that haven't been saved yet." })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: ignoreChanges,
-                className: "flex-1 sm:flex-none px-4 py-2 rounded-[2.5rem] text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95 whitespace-nowrap",
-                children: "Ignore"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: syncScreenplay,
-                className: "flex-1 sm:flex-none px-5 py-2 rounded-[2.5rem] text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/25 transition-all active:scale-95 flex items-center justify-center gap-2 whitespace-nowrap",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-4 h-4" }),
-                  "Sync to Cloud"
-                ]
-              }
-            )
-          ] })
+                    handleBlur(block.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-blumine-500 transition-colors mr-3" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
+                  ]
+                },
+                char
+              )) })
+            }
+          ),
+          isFocused && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "listbox",
+              id: `extension-suggestions-${block.id}`,
+              className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
+                const openParenIndex = block.text.lastIndexOf("(");
+                const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
+                return ext.toUpperCase().includes(query);
+              }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "option",
+                  className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    handleSelectCharacterExtension(ext);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
+                  ]
+                },
+                ext
+              )) })
+            }
+          ),
+          isFocused && !enhancingBlockId && (block.type === "ACTION" || block.type === "DIALOGUE") && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => handleEnhance(block),
+              className: "absolute -right-12 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-xl border border-blumine-200/50 bg-white text-blumine-500 hover:border-blumine-400/60 hover:bg-blumine-50/90 hover:ring-2 hover:ring-blumine-100 hover:scale-105 active:scale-95 transition-all duration-200 group/enhance animate-in fade-in slide-in-from-left-2",
+              title: "Enhance with AI",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 group-hover/enhance:animate-pulse transition-colors" })
+            }
+          ),
+          enhancingBlockId === block.id && (enhancementSuggestion || isEnhancing) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "absolute left-0 right-0 -top-4 -translate-y-full z-[50] animate-in fade-in zoom-in-95 slide-in-from-bottom-4 duration-300",
+              style: { width: "calc(100% + 2rem)", left: "-1rem" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full rounded-[2rem] bg-white border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.1),0_2px_8px_rgba(16,37,54,0.05)] backdrop-blur-xl p-2 select-none transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-full bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-bold text-zinc-900 uppercase tracking-wider leading-none", children: "AI Suggestion" }),
+                        !isEnhancing && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-zinc-500 mt-1 font-medium", children: "Refining your screenplay dialogue" })
+                      ] })
+                    ] }),
+                    !isEnhancing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: handleRejectEnhance,
+                          className: "px-3 py-2 rounded-full text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95",
+                          children: "Discard"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          onClick: handleApproveEnhance,
+                          className: "px-4 py-2 rounded-full text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/20 transition-all active:scale-95 flex items-center gap-1.5",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5" }),
+                            "Apply Changes"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[1.25rem] bg-zinc-50/50 border border-zinc-100 p-4 min-h-[4rem]", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 py-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-3/4 bg-zinc-200/60 animate-pulse rounded-full" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-1/2 bg-zinc-200/60 animate-pulse rounded-full" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-400 line-through decoration-zinc-300 italic", children: block.text }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-800 font-medium leading-relaxed", children: enhancementSuggestion })
+                  ] }) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white border-r border-b border-zinc-200/50 rotate-45" })
+              ]
+            }
+          ),
+          isFocused && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            PhoneticSuggestions,
+            {
+              suggestions: phoneticSuggestions,
+              onSelect: handleSelectPhoneticSuggestion
+            }
+          )
         ] })
       }
-    )
-  ] });
-}
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.isLocked === nextProps.isLocked && prevProps.isFocused === nextProps.isFocused && prevProps.currentLanguage === nextProps.currentLanguage && prevProps.enhancingBlockId === nextProps.enhancingBlockId && prevProps.isEnhancing === nextProps.isEnhancing && prevProps.enhancementSuggestion === nextProps.enhancementSuggestion && prevProps.block.text === nextProps.block.text && prevProps.block.type === nextProps.block.type && prevProps.block.sceneNumber === nextProps.block.sceneNumber && prevProps.block.sceneType === nextProps.block.sceneType && prevProps.block.timeOfDay === nextProps.block.timeOfDay && (!nextProps.isFocused || prevProps.showSuggestions === nextProps.showSuggestions && prevProps.showExtensionSuggestions === nextProps.showExtensionSuggestions && prevProps.phoneticSuggestions === nextProps.phoneticSuggestions && prevProps.locations === nextProps.locations && prevProps.characters === nextProps.characters);
+  }
+);
 
 // app/service/screenplay-editor.service.ts
 function getNextBlockType(currentType) {
@@ -2223,49 +2423,144 @@ function createRangeFromGlobalOffset(element, startOffset, endOffset) {
   return null;
 }
 function useScreenplayEditor(options) {
-  const [blocks, setBlocks] = react.useState(initialBlocks);
-  const refs = react.useRef({});
-  const [focusedBlockId, setFocusedBlockId] = react.useState(
+  var _a;
+  const [blocks, setBlocks] = React4.useState(
+    (options == null ? void 0 : options.blocks) || initialBlocks || []
+  );
+  const hasInitializedRef = React4.useRef(
+    !!((options == null ? void 0 : options.blocks) && options.blocks.length > 0)
+  );
+  React4.useEffect(() => {
+    if ((options == null ? void 0 : options.blocks) && options.blocks.length > 0 && !hasInitializedRef.current) {
+      setIsLoading(true);
+      isWaitingForDOMRef.current = true;
+      skipAutosaveRef.current = true;
+      const timer = setTimeout(() => {
+        setBlocks(options.blocks);
+        hasInitializedRef.current = true;
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [options == null ? void 0 : options.blocks]);
+  const refs = React4.useRef({});
+  const [focusedBlockId, setFocusedBlockId] = React4.useState(
     initialBlocks[0].id
   );
-  const [newBlockId, setNewBlockId] = react.useState(null);
-  const [showSuggestions, setShowSuggestions] = react.useState(false);
-  const [showExtensionSuggestions, setShowExtensionSuggestions] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(!!(options == null ? void 0 : options.initialUrl));
-  const [enhancingBlockId, setEnhancingBlockId] = react.useState(null);
-  const [enhancementSuggestion, setEnhancementSuggestion] = react.useState(null);
-  const [isEnhancing, setIsEnhancing] = react.useState(false);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = react.useState(false);
-  const [showUnsavedPopover, setShowUnsavedPopover] = react.useState(false);
-  const popoverTimeoutRef = react.useRef(null);
-  const blurTimeout = react.useRef(null);
-  const isInitialLoadRef = react.useRef(true);
-  const loadedUrlRef = react.useRef(null);
-  const lastSavedContent = react.useRef(null);
-  const onSaveRef = react.useRef(options == null ? void 0 : options.onSave);
-  const onSyncWithCloudRef = react.useRef(options == null ? void 0 : options.onSyncWithCloud);
-  const [currentLanguage, setCurrentLanguage] = react.useState("English");
-  const [lastPhoneticAction, setLastPhoneticAction] = react.useState(null);
-  const [phoneticSuggestions, setPhoneticSuggestions] = react.useState([]);
-  react.useEffect(() => {
+  const [newBlockId, setNewBlockId] = React4.useState(null);
+  const [showSuggestions, setShowSuggestions] = React4.useState(false);
+  const [showExtensionSuggestions, setShowExtensionSuggestions] = React4.useState(false);
+  const [isLoading, setIsLoading] = React4.useState(
+    !!((options == null ? void 0 : options.initialUrl) || (options == null ? void 0 : options.blocks) && options.blocks.length > 0)
+  );
+  const [enhancingBlockId, setEnhancingBlockId] = React4.useState(null);
+  const [enhancementSuggestion, setEnhancementSuggestion] = React4.useState(null);
+  const [isEnhancing, setIsEnhancing] = React4.useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React4.useState(false);
+  const [showUnsavedPopover, setShowUnsavedPopover] = React4.useState(false);
+  const popoverTimeoutRef = React4.useRef(null);
+  const blurTimeout = React4.useRef(null);
+  const isInitialLoadRef = React4.useRef(true);
+  const skipAutosaveRef = React4.useRef(false);
+  const isWaitingForDOMRef = React4.useRef(
+    !!((options == null ? void 0 : options.initialUrl) || (options == null ? void 0 : options.blocks) && options.blocks.length > 0)
+  );
+  const loadedUrlRef = React4.useRef(null);
+  const lastSavedContent = React4.useRef(null);
+  const onSaveRef = React4.useRef(options == null ? void 0 : options.onSave);
+  const onSaveBlobRef = React4.useRef(options == null ? void 0 : options.onSaveBlob);
+  const onSyncWithCloudRef = React4.useRef(options == null ? void 0 : options.onSyncWithCloud);
+  const [autosaveStatus, setAutosaveStatus] = React4.useState("idle");
+  const isLocked = (_a = options == null ? void 0 : options.isLocked) != null ? _a : false;
+  const [currentLanguage, setCurrentLanguage] = React4.useState("English");
+  const [lastPhoneticAction, setLastPhoneticAction] = React4.useState(null);
+  const [phoneticSuggestions, setPhoneticSuggestions] = React4.useState([]);
+  const lastSyncedTextRef = React4.useRef({});
+  React4.useEffect(() => {
     setLastPhoneticAction(null);
     setPhoneticSuggestions([]);
   }, [currentLanguage]);
-  const phoneticEngine = react.useMemo(() => {
+  const phoneticEngine = React4.useMemo(() => {
     if (currentLanguage.includes("Phonetic")) {
       return new PhoneticEngine(currentLanguage);
     }
     return null;
   }, [currentLanguage]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     onSaveRef.current = options == null ? void 0 : options.onSave;
+    onSaveBlobRef.current = options == null ? void 0 : options.onSaveBlob;
     onSyncWithCloudRef.current = options == null ? void 0 : options.onSyncWithCloud;
-  }, [options == null ? void 0 : options.onSave, options == null ? void 0 : options.onSyncWithCloud]);
-  const characterExtensions = react.useMemo(
+  }, [options == null ? void 0 : options.onSave, options == null ? void 0 : options.onSaveBlob, options == null ? void 0 : options.onSyncWithCloud]);
+  const isFirstAutosaveRender = React4.useRef(true);
+  const prevBlocksRef = React4.useRef(blocks);
+  React4.useEffect(() => {
+    if (isLocked) {
+      setAutosaveStatus("idle");
+      return;
+    }
+    if (isFirstAutosaveRender.current) {
+      isFirstAutosaveRender.current = false;
+      prevBlocksRef.current = blocks;
+      return;
+    }
+    if (skipAutosaveRef.current) {
+      skipAutosaveRef.current = false;
+      prevBlocksRef.current = blocks;
+      return;
+    }
+    const hasChanged = blocks.length !== prevBlocksRef.current.length || blocks.some((b, i) => b !== prevBlocksRef.current[i]);
+    if (!hasChanged) {
+      return;
+    }
+    setAutosaveStatus("typing");
+    prevBlocksRef.current = blocks;
+    const timer = setTimeout(async () => {
+      if (onSaveRef.current) {
+        setAutosaveStatus("saving");
+        try {
+          await onSaveRef.current(blocks);
+          setAutosaveStatus("saved");
+          setTimeout(() => {
+            setAutosaveStatus((prev) => prev === "saved" ? "idle" : prev);
+          }, 2e3);
+        } catch (error) {
+          console.error("Autosave failed:", error);
+          setAutosaveStatus("error");
+        }
+      } else {
+        setAutosaveStatus("idle");
+      }
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, [blocks, isLocked]);
+  const latestBlocksRef = React4.useRef(blocks);
+  React4.useEffect(() => {
+    latestBlocksRef.current = blocks;
+  }, [blocks]);
+  React4.useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (autosaveStatus === "typing" || autosaveStatus === "saving") {
+        e.preventDefault();
+        e.returnValue = "Changes you made may not be saved.";
+        return e.returnValue;
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [autosaveStatus]);
+  React4.useEffect(() => {
+    return () => {
+      if (autosaveStatus === "typing" && onSaveRef.current) {
+        onSaveRef.current(latestBlocksRef.current);
+      }
+    };
+  }, [autosaveStatus]);
+  const characterExtensions = React4.useMemo(
     () => ["(V.O.)", "(O.S.)", "(O.C.)", "(SUBTITLE)", "(CONT'D)"],
     []
   );
-  const handleSceneNumberChange = react.useCallback(
+  const handleSceneNumberChange = React4.useCallback(
     (id, newNumber) => {
       setBlocks(
         (prevBlocks) => prevBlocks.map(
@@ -2275,45 +2570,52 @@ function useScreenplayEditor(options) {
     },
     []
   );
-  const locations = react.useMemo(() => {
-    const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
-    return [...new Set(locs)];
-  }, [blocks]);
-  const characters = react.useMemo(() => {
-    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => {
-      const text = b.text.trim().toUpperCase();
-      const parenIndex = text.indexOf("(");
-      if (parenIndex > -1) {
-        return text.substring(0, parenIndex).trim();
-      }
-      return text;
-    }).filter(Boolean);
-    return [...new Set(chars)];
-  }, [blocks]);
-  const sceneNumbers = react.useMemo(() => {
-    const map = {};
+  const { locations, characters, sceneNumbers } = React4.useMemo(() => {
+    const locsSet = /* @__PURE__ */ new Set();
+    const charsSet = /* @__PURE__ */ new Set();
+    const sceneNumMap = {};
     let fallbackCount = 0;
     blocks.forEach((block) => {
+      const textTrim = block.text.trim();
       if (block.type === "SCENE_HEADING") {
+        if (textTrim !== "") {
+          locsSet.add(textTrim.toUpperCase());
+        }
         if (block.sceneNumber) {
-          map[block.id] = block.sceneNumber;
+          sceneNumMap[block.id] = block.sceneNumber;
           const base = parseInt(block.sceneNumber);
           if (!isNaN(base)) fallbackCount = Math.max(fallbackCount, base);
         } else {
           fallbackCount++;
-          map[block.id] = String(fallbackCount);
+          sceneNumMap[block.id] = String(fallbackCount);
+        }
+      } else if (block.type === "CHARACTER") {
+        if (textTrim !== "") {
+          const textUpper = textTrim.toUpperCase();
+          const parenIndex = textUpper.indexOf("(");
+          if (parenIndex > -1) {
+            const charName = textUpper.substring(0, parenIndex).trim();
+            if (charName) charsSet.add(charName);
+          } else {
+            charsSet.add(textUpper);
+          }
         }
       }
     });
-    return map;
+    return {
+      locations: Array.from(locsSet),
+      characters: Array.from(charsSet),
+      sceneNumbers: sceneNumMap
+    };
   }, [blocks]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (newBlockId && refs.current[newBlockId]) {
       const block = blocks.find((b) => b.id === newBlockId);
       const el = refs.current[newBlockId];
       if (el && block) {
         el.focus();
-        el.innerText = block.text;
+        el.textContent = block.text;
+        lastSyncedTextRef.current[newBlockId] = block.text;
         if (block.type === "PARENTHETICAL") {
           setTimeout(() => setCaretPosition(el, 1), 0);
         } else {
@@ -2324,17 +2626,57 @@ function useScreenplayEditor(options) {
       setNewBlockId(null);
     }
   }, [newBlockId, blocks]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     blocks.forEach((block) => {
       const element = refs.current[block.id];
       if (element) {
-        if (element.innerText !== block.text && document.activeElement !== element) {
-          element.innerText = block.text;
+        if (lastSyncedTextRef.current[block.id] !== block.text && document.activeElement !== element) {
+          element.textContent = block.text;
+          lastSyncedTextRef.current[block.id] = block.text;
         }
       }
     });
+    if (isWaitingForDOMRef.current) {
+      const dismissLoader = () => {
+        if (typeof window !== "undefined") {
+          void document.body.scrollHeight;
+        }
+        setIsLoading(false);
+        isWaitingForDOMRef.current = false;
+      };
+      const waitForAllReady = async () => {
+        if (typeof window !== "undefined") {
+          try {
+            if (document.fonts && document.fonts.ready) {
+              await document.fonts.ready;
+            }
+          } catch (e) {
+            console.error("Font loading detection failed:", e);
+          }
+        }
+        if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              window.requestIdleCallback(
+                () => {
+                  setTimeout(dismissLoader, 150);
+                },
+                { timeout: 2e3 }
+              );
+            });
+          });
+        } else {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setTimeout(dismissLoader, 400);
+            });
+          });
+        }
+      };
+      waitForAllReady();
+    }
   }, [blocks]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const isInsideBlock = target.closest("[data-block-id]");
@@ -2352,7 +2694,7 @@ function useScreenplayEditor(options) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  const handleBlockTextChange = react.useCallback(
+  const handleBlockTextChange = React4.useCallback(
     (id, text) => {
       const block = blocks.find((b) => b.id === id);
       if (!block) return;
@@ -2388,35 +2730,38 @@ function useScreenplayEditor(options) {
           const offset = getCaretCharacterOffsetWithin(el);
           const charsBeforeCaret = text.substring(0, offset).replace(/[()]/g, "").length;
           const newOffset = 1 + charsBeforeCaret;
-          el.innerText = processedText;
+          el.textContent = processedText;
+          lastSyncedTextRef.current[id] = processedText;
           setCaretPosition(el, newOffset);
         }
+      } else {
+        lastSyncedTextRef.current[id] = text;
       }
     },
     [blocks, showExtensionSuggestions]
   );
-  const handleSceneTypeChange = react.useCallback(
+  const handleSceneTypeChange = React4.useCallback(
     (id, sceneType) => {
       setBlocks(
         (bs) => updateBlock(bs, id, "sceneType", sceneType)
       );
       setTimeout(() => {
-        var _a;
-        (_a = refs.current[id]) == null ? void 0 : _a.focus();
+        var _a2;
+        (_a2 = refs.current[id]) == null ? void 0 : _a2.focus();
         setFocusedBlockId(id);
       }, 10);
     },
     []
   );
-  const handleTimeOfDayChange = react.useCallback((id, time) => {
+  const handleTimeOfDayChange = React4.useCallback((id, time) => {
     setBlocks((bs) => updateBlock(bs, id, "timeOfDay", time));
     setTimeout(() => {
-      var _a;
-      (_a = refs.current[id]) == null ? void 0 : _a.focus();
+      var _a2;
+      (_a2 = refs.current[id]) == null ? void 0 : _a2.focus();
       setFocusedBlockId(id);
     }, 10);
   }, []);
-  const handleBlockTypeChange = react.useCallback(
+  const handleBlockTypeChange = React4.useCallback(
     (newType) => {
       if (!focusedBlockId) return;
       setBlocks(
@@ -2442,7 +2787,7 @@ function useScreenplayEditor(options) {
     },
     [focusedBlockId, blocks]
   );
-  const handleSelectCharacterExtension = react.useCallback(
+  const handleSelectCharacterExtension = React4.useCallback(
     (extension) => {
       if (!focusedBlockId) return;
       setBlocks((currentBlocks) => {
@@ -2511,9 +2856,9 @@ function useScreenplayEditor(options) {
       }
     }, 10);
   };
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e, id, text) => {
-      var _a;
+      var _a2;
       if (currentLanguage !== "English") {
         const config = LANGUAGE_CONFIGS[currentLanguage];
         const char = getMappedCharacter(
@@ -2680,7 +3025,7 @@ function useScreenplayEditor(options) {
         const range = selection.getRangeAt(0);
         const contentEditable = e.currentTarget;
         const container = range.endContainer;
-        const isAtEndOffset = range.endOffset === (container.nodeType === Node.TEXT_NODE ? (_a = container.textContent) == null ? void 0 : _a.length : container.childNodes.length);
+        const isAtEndOffset = range.endOffset === (container.nodeType === Node.TEXT_NODE ? (_a2 = container.textContent) == null ? void 0 : _a2.length : container.childNodes.length);
         if (isAtEndOffset) {
           let atEnd = false;
           let node = container;
@@ -2720,7 +3065,7 @@ function useScreenplayEditor(options) {
       lastPhoneticAction
     ]
   );
-  const handleScriptImport = react.useCallback(
+  const handleScriptImport = React4.useCallback(
     (title, content, preParsedBlocks, isInitialLoad) => {
       let parsedBlocks = [];
       if (preParsedBlocks && preParsedBlocks.length > 0) {
@@ -2736,6 +3081,9 @@ function useScreenplayEditor(options) {
         parsedBlocks = parseScreenplayText(content);
       }
       if (parsedBlocks.length > 0) {
+        setIsLoading(true);
+        isWaitingForDOMRef.current = true;
+        skipAutosaveRef.current = true;
         let fallbackCount = 1;
         const finalizedBlocks = parsedBlocks.map((block) => {
           if (block.type === "SCENE_HEADING") {
@@ -2750,30 +3098,35 @@ function useScreenplayEditor(options) {
           }
           return block;
         });
-        setBlocks(finalizedBlocks);
-        if (onSaveRef.current) {
-          const sbxData = serializeToSbx(finalizedBlocks);
-          if (sbxData !== lastSavedContent.current) {
-            lastSavedContent.current = sbxData;
-            if (!isInitialLoad) {
-              const blob = new Blob([sbxData], { type: "text/plain" });
-              onSaveRef.current(blob);
-            }
-          }
-        }
         setTimeout(() => {
-          var _a;
-          const firstId = parsedBlocks[0].id;
-          if (firstId && refs.current[firstId]) {
-            setFocusedBlockId(firstId);
-            (_a = refs.current[firstId]) == null ? void 0 : _a.focus();
+          setBlocks(finalizedBlocks);
+          if (onSaveBlobRef.current) {
+            const sbxData = serializeToSbx(finalizedBlocks);
+            if (sbxData !== lastSavedContent.current) {
+              lastSavedContent.current = sbxData;
+              if (!isInitialLoad) {
+                const blob = new Blob([sbxData], { type: "text/plain" });
+                onSaveBlobRef.current(blob);
+              }
+            }
           }
-        }, 100);
+          setTimeout(() => {
+            var _a2;
+            const firstId = parsedBlocks[0].id;
+            if (firstId && refs.current[firstId]) {
+              setFocusedBlockId(firstId);
+              (_a2 = refs.current[firstId]) == null ? void 0 : _a2.focus();
+            }
+          }, 100);
+        }, 50);
+      } else {
+        setIsLoading(false);
+        isWaitingForDOMRef.current = false;
       }
     },
     [refs]
   );
-  const handleSelectPhoneticSuggestion = react.useCallback(
+  const handleSelectPhoneticSuggestion = React4.useCallback(
     (suggestion) => {
       if (!focusedBlockId) return;
       const el = refs.current[focusedBlockId];
@@ -2793,7 +3146,7 @@ function useScreenplayEditor(options) {
     },
     [focusedBlockId, handleBlockTextChange]
   );
-  const handleFocus = react.useCallback(
+  const handleFocus = React4.useCallback(
     (id) => {
       if (blurTimeout.current) {
         clearTimeout(blurTimeout.current);
@@ -2818,14 +3171,14 @@ function useScreenplayEditor(options) {
     },
     [blocks]
   );
-  const handleBlur = react.useCallback((id) => {
+  const handleBlur = React4.useCallback((id) => {
     if (document.activeElement === refs.current[id]) return;
     blurTimeout.current = setTimeout(() => {
       setShowSuggestions(false);
       setShowExtensionSuggestions(false);
     }, 200);
   }, []);
-  const syncScreenplay = react.useCallback(() => {
+  const syncScreenplay = React4.useCallback(() => {
     if (!onSyncWithCloudRef.current) return;
     onSyncWithCloudRef.current(blocks, sceneNumbers);
     lastSavedContent.current = serializeToSbx(blocks);
@@ -2833,13 +3186,13 @@ function useScreenplayEditor(options) {
     setShowUnsavedPopover(false);
     if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
   }, [blocks, sceneNumbers]);
-  const ignoreChanges = react.useCallback(() => {
+  const ignoreChanges = React4.useCallback(() => {
     setShowUnsavedPopover(false);
     if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
   }, []);
-  const loadFromUrl = react.useCallback(
+  const loadFromUrl = React4.useCallback(
     async (url, fetchOptions = {}, isInitialLoad) => {
-      var _a;
+      var _a2;
       setIsLoading(true);
       try {
         const response = await fetch(url, fetchOptions);
@@ -2851,7 +3204,15 @@ function useScreenplayEditor(options) {
         let text = await response.text();
         let preParsedBlocks = void 0;
         let scriptContent = text;
-        if (text.includes('class="divtype') || url.toLowerCase().includes(".sbx")) {
+        try {
+          const parsed = JSON.parse(text);
+          if (Array.isArray(parsed)) {
+            preParsedBlocks = parsed;
+            scriptContent = "";
+          }
+        } catch (e) {
+        }
+        if (!preParsedBlocks && (text.includes('class="divtype') || url.toLowerCase().includes(".sbx"))) {
           if (text.includes("<div")) {
             const textarea = document.createElement("textarea");
             textarea.innerHTML = text;
@@ -2870,8 +3231,8 @@ function useScreenplayEditor(options) {
             divtype6: "TRANSITION"
           };
           divs.forEach((div) => {
-            var _a2;
-            let divText = ((_a2 = div.textContent) == null ? void 0 : _a2.trim()) || "";
+            var _a3;
+            let divText = ((_a3 = div.textContent) == null ? void 0 : _a3.trim()) || "";
             if (!divText) return;
             let type = "ACTION";
             for (const className of Array.from(div.classList)) {
@@ -2910,50 +3271,70 @@ function useScreenplayEditor(options) {
             scriptContent = "";
           }
         }
-        const filename = ((_a = url.split("/").pop()) == null ? void 0 : _a.replace(/\.sbx$/i, "")) || "Imported from URL";
+        const filename = ((_a2 = url.split("/").pop()) == null ? void 0 : _a2.replace(/\.sbx$/i, "")) || "Imported from URL";
+        isWaitingForDOMRef.current = true;
         handleScriptImport(
           filename,
           scriptContent,
           preParsedBlocks,
           isInitialLoad
         );
-      } finally {
+      } catch (error) {
+        console.error("Failed to load screenplay from URL:", error);
         setIsLoading(false);
+        isWaitingForDOMRef.current = false;
       }
     },
     [handleScriptImport]
   );
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (isLoading) {
       isInitialLoadRef.current = true;
       return;
     }
-    const currentSbx = serializeToSbx(blocks);
-    if (isInitialLoadRef.current) {
-      if (lastSavedContent.current === null) {
-        lastSavedContent.current = currentSbx;
+    const handler = setTimeout(() => {
+      const runSerialization = () => {
+        const currentSbx = serializeToSbx(blocks);
+        if (isInitialLoadRef.current) {
+          if (lastSavedContent.current === null) {
+            lastSavedContent.current = currentSbx;
+          }
+          isInitialLoadRef.current = false;
+          return;
+        }
+        const hasActualChanges = lastSavedContent.current !== null && currentSbx !== lastSavedContent.current;
+        if (hasActualChanges) {
+          setHasUnsavedChanges(true);
+          if (popoverTimeoutRef.current)
+            clearTimeout(popoverTimeoutRef.current);
+          setShowUnsavedPopover(false);
+          popoverTimeoutRef.current = setTimeout(() => {
+            setShowUnsavedPopover(true);
+          }, 1e3);
+        } else {
+          setHasUnsavedChanges(false);
+          setShowUnsavedPopover(false);
+          if (popoverTimeoutRef.current)
+            clearTimeout(popoverTimeoutRef.current);
+        }
+      };
+      if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+        window.requestIdleCallback(
+          () => {
+            runSerialization();
+          },
+          { timeout: 1e3 }
+        );
+      } else {
+        runSerialization();
       }
-      isInitialLoadRef.current = false;
-      return;
-    }
-    const hasActualChanges = lastSavedContent.current !== null && currentSbx !== lastSavedContent.current;
-    if (hasActualChanges) {
-      setHasUnsavedChanges(true);
-      if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
-      setShowUnsavedPopover(false);
-      popoverTimeoutRef.current = setTimeout(() => {
-        setShowUnsavedPopover(true);
-      }, 1e3);
-    } else {
-      setHasUnsavedChanges(false);
-      setShowUnsavedPopover(false);
-      if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
-    }
+    }, 250);
     return () => {
+      clearTimeout(handler);
       if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
     };
   }, [blocks, isLoading]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if ((options == null ? void 0 : options.initialUrl) && options.initialUrl !== loadedUrlRef.current) {
       loadedUrlRef.current = options.initialUrl;
       loadFromUrl(options.initialUrl, options.fetchOptions, true);
@@ -3039,7 +3420,9 @@ function useScreenplayEditor(options) {
     currentLanguage,
     setCurrentLanguage,
     phoneticSuggestions,
-    handleSelectPhoneticSuggestion
+    handleSelectPhoneticSuggestion,
+    isLocked,
+    autosaveStatus
   };
 }
 
@@ -3324,7 +3707,369 @@ var SummarizeButton = ({
     }
   );
 };
-var summarize_button_default = SummarizeButton;
+var summarize_button_default = SummarizeButton;
+
+// data/crowd-data.ts
+var crowdAgeOption = [
+  { name: "Adult" },
+  { name: "Old" },
+  { name: "Teenage" },
+  { name: "Kid" }
+];
+var crowdTypeOption = [{ name: "Male" }, { name: "Female" }];
+var FormikSelect = ({
+  label,
+  name,
+  selectedOption,
+  optionData,
+  value,
+  disable,
+  divClasses,
+  valueProperty = "name",
+  labelProperty = "name",
+  label2propery,
+  brackets,
+  className,
+  enableRedAsterick = false,
+  disableOptionProperty = "disable",
+  disabledOptionText = "",
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      formik.Field,
+      {
+        name,
+        as: "select",
+        value,
+        disabled: disable,
+        onChange,
+        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { selected: true, value: "", disabled: true, className: "capitalize", children: selectedOption }),
+          optionData == null ? void 0 : optionData.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "option",
+            {
+              value: option[valueProperty],
+              disabled: option[disableOptionProperty],
+              children: [
+                option[labelProperty],
+                label2propery ? brackets ? ` (${option[label2propery]})` : option[label2propery] : "",
+                " ",
+                option[disableOptionProperty] && `(${disabledOptionText})`
+              ]
+            },
+            index
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var FormikInput = (_a) => {
+  var _b = _a, {
+    label,
+    name,
+    type,
+    placeholder,
+    className,
+    labelClassName,
+    readOnly,
+    divClasses,
+    length,
+    disable,
+    min = 0,
+    max,
+    convertToText = false,
+    enableRedAsterick = false,
+    case_sensitivity = "normal"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "name",
+    "type",
+    "placeholder",
+    "className",
+    "labelClassName",
+    "readOnly",
+    "divClasses",
+    "length",
+    "disable",
+    "min",
+    "max",
+    "convertToText",
+    "enableRedAsterick",
+    "case_sensitivity"
+  ]);
+  const { setFieldValue } = formik.useFormikContext();
+  const handleCaseChange = (e) => {
+    let value = e.target.value;
+    if (type === "number" && min !== void 0) {
+      if (value !== "" && Number(value) < min) return;
+    }
+    switch (case_sensitivity) {
+      case "lowercase":
+        value = value.toLowerCase();
+        break;
+      case "uppercase":
+        value = value.toUpperCase();
+        break;
+    }
+    setFieldValue(name, value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: `${labelClassName} mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.Field,
+      __spreadProps(__spreadValues({
+        name,
+        placeholder,
+        readOnly,
+        type,
+        maxLength: length,
+        disabled: disable,
+        max,
+        min,
+        onChange: handleCaseChange
+      }, props), {
+        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
+      })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var FormikTextarea = ({
+  label,
+  name,
+  placeholder,
+  readOnly,
+  divClasses = "",
+  className = "",
+  length,
+  disable,
+  min,
+  max,
+  enableRedAsterick = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.Field,
+      {
+        as: "textarea",
+        name,
+        placeholder,
+        readOnly,
+        maxLength: length,
+        disabled: disable,
+        max,
+        min,
+        className: `${className} block w-full px-4 py-3 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 rounded-2xl focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var Switch = ({
+  isOn,
+  handleToggle,
+  activeColor = "bg-green-500",
+  inactiveColor = "bg-gray-300",
+  size = "medium",
+  onLabel,
+  offLabel,
+  label,
+  divClasses,
+  labelClasses,
+  disable = false
+}) => {
+  const sizeClasses = {
+    small: { width: 28, height: 18, handle: 12, labelSize: 12, gap: 4 },
+    medium: { width: 48, height: 28, handle: 20, labelSize: 16, gap: 6 },
+    large: { width: 64, height: 36, handle: 28, labelSize: 20, gap: 10 }
+  };
+  const selectedSize = sizeClasses[size] || sizeClasses.medium;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: `block mb-2 text-sm text-gray-600 ${disable && "text-gray-400!"} ${labelClasses}`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { gap: selectedSize.gap }, className: "flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `flex items-center rounded-full cursor-pointer relative ${isOn ? activeColor : inactiveColor} ${disable && "opacity-50 cursor-not-allowed"}`,
+          onClick: disable ? () => {
+          } : handleToggle,
+          role: "button",
+          "aria-pressed": isOn,
+          style: {
+            width: selectedSize.width,
+            height: selectedSize.height
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "bg-white rounded-full shadow-sm ease-in duration-200",
+              style: {
+                width: selectedSize.handle,
+                height: selectedSize.handle,
+                transform: `translateX(${isOn ? selectedSize.width - selectedSize.handle - 3 : 3}px)`,
+                transition: "transform 0.2s ease-in-out"
+              }
+            }
+          )
+        }
+      ),
+      onLabel && offLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: selectedSize.labelSize }, children: isOn ? onLabel : offLabel })
+    ] })
+  ] });
+};
+var MultiSelect = ({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "Select options...",
+  valueProperty = "name",
+  labelProperty = "name",
+  divClasses = "",
+  returnObjects = false
+}) => {
+  const [isOpen, setIsOpen] = React4__default.default.useState(false);
+  const containerRef = React4__default.default.useRef(null);
+  const isSelected = (optionValue) => {
+    return value.some(
+      (v) => typeof v === "object" && v !== null ? v[valueProperty] === optionValue : v === optionValue
+    );
+  };
+  const toggleOption = (optionValue) => {
+    let newValues;
+    if (isSelected(optionValue)) {
+      newValues = value.filter(
+        (v) => typeof v === "object" && v !== null ? v[valueProperty] !== optionValue : v !== optionValue
+      );
+    } else {
+      const newValue = returnObjects ? options.find((opt) => opt[valueProperty] === optionValue) : optionValue;
+      newValues = [...value, newValue];
+    }
+    onChange(newValues);
+  };
+  const removeOption = (e, optionValue) => {
+    e.stopPropagation();
+    const newValues = value.filter(
+      (v) => typeof v === "object" && v !== null ? v[valueProperty] !== optionValue : v !== optionValue
+    );
+    onChange(newValues);
+  };
+  React4__default.default.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full relative ${divClasses}`, ref: containerRef, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 text-xs font-bold text-slate-600 ml-1 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: `min-h-[40px] w-full px-3 py-1.5 bg-slate-50/50 border border-slate-200/80 rounded-xl transition-all cursor-pointer flex flex-wrap gap-1.5 items-center ${isOpen ? "border-blumine-500 bg-white shadow-sm ring-2 ring-blumine-500/10" : "hover:border-slate-300"}`,
+        children: value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 text-[13px] ml-1", children: placeholder }) : value.map((val) => {
+          const actualValue = typeof val === "object" && val !== null ? val[valueProperty] : val;
+          const option = options.find(
+            (opt) => opt[valueProperty] === actualValue
+          );
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1 bg-white text-slate-700 px-2 py-0.5 rounded-lg border border-slate-200 text-[11px] font-bold shadow-sm animate-in zoom-in-95 duration-150",
+              children: [
+                option ? option[labelProperty] : actualValue,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => removeOption(e, actualValue),
+                    className: "hover:text-red-500 transition-colors ml-0.5",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            actualValue
+          );
+        })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-[110] w-full mt-1.5 bg-white border border-slate-200 rounded-xl shadow-xl max-h-48 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-200 custom-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: options.filter((opt) => !isSelected(opt[valueProperty])).length > 0 ? options.filter((opt) => !isSelected(opt[valueProperty])).map((option, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onClick: () => toggleOption(option[valueProperty]),
+          className: "px-3 py-2 text-[12px] rounded-lg cursor-pointer transition-colors flex items-center justify-between text-slate-600 hover:bg-slate-50",
+          children: option[labelProperty]
+        },
+        index
+      );
+    }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3 text-[10px] text-slate-400 text-center font-bold uppercase tracking-wider", children: "All selected" }) }) })
+  ] });
+};
 function ScriptBreakdownSceneView({
   blocks,
   characters,
@@ -3346,16 +4091,16 @@ function ScriptBreakdownSceneView({
   aiSummarized = false,
   onUpdateBrief
 }) {
-  const [expandedCategories, setExpandedCategories] = react.useState({});
-  const [editingTagData, setEditingTagData] = react.useState(null);
-  const [tagForm, setTagForm] = react.useState({ quantity: 1, look: "", age: "" });
-  const [popupPlacement, setPopupPlacement] = react.useState({
+  const [expandedCategories, setExpandedCategories] = React4.useState({});
+  const [editingTagData, setEditingTagData] = React4.useState(null);
+  const [tagForm, setTagForm] = React4.useState({ quantity: 1, look: "", age: "", age_range: [], crowd_type: [] });
+  const [popupPlacement, setPopupPlacement] = React4.useState({
     alignRight: false,
     alignBottom: false
   });
-  const [isSidebarOpen, setIsSidebarOpen] = react.useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = React4.useState(false);
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
     if (!document.getElementById(fontId)) {
@@ -3709,7 +4454,7 @@ function ScriptBreakdownSceneView({
                               title: tag.name,
                               onClick: (e) => {
                                 e.stopPropagation();
-                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST")
+                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST" && cat.id !== "EXTRA")
                                   return;
                                 if ((editingTagData == null ? void 0 : editingTagData.tag.id) === tag.id) {
                                   setEditingTagData(null);
@@ -3722,7 +4467,9 @@ function ScriptBreakdownSceneView({
                                   setTagForm({
                                     quantity: tag.quantity || 1,
                                     look: tag.look || "",
-                                    age: tag.age || ""
+                                    age: tag.age || "",
+                                    age_range: tag.age_range || [],
+                                    crowd_type: tag.crowd_type || []
                                   });
                                   setEditingTagData({
                                     tag,
@@ -3732,7 +4479,7 @@ function ScriptBreakdownSceneView({
                                   });
                                 }
                               },
-                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
+                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 cursor-pointer! ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
                               style: {
                                 color: cat.color,
                                 background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
@@ -3856,13 +4603,38 @@ function ScriptBreakdownSceneView({
                 )
               ] })
             ] }),
+            editingTagData.catId === "EXTRA" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MultiSelect,
+                {
+                  label: "Age Range",
+                  options: crowdAgeOption,
+                  value: tagForm.age_range,
+                  returnObjects: true,
+                  onChange: (val) => setTagForm((prev) => __spreadProps(__spreadValues({}, prev), { age_range: val }))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MultiSelect,
+                {
+                  label: "Crowd Type",
+                  options: crowdTypeOption,
+                  value: tagForm.crowd_type,
+                  returnObjects: true,
+                  onChange: (val) => setTagForm((prev) => __spreadProps(__spreadValues({}, prev), { crowd_type: val }))
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: (e) => {
                   e.stopPropagation();
                   if (editingTagData.tag.id) {
-                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, editingTagData.catId, __spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}));
+                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, editingTagData.catId, __spreadValues(__spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}), editingTagData.catId === "EXTRA" ? {
+                      age_range: tagForm.age_range,
+                      crowd_type: tagForm.crowd_type
+                    } : {}));
                   }
                   setEditingTagData(null);
                 },
@@ -3877,17 +4649,17 @@ function ScriptBreakdownSceneView({
   ] });
 }
 function useScriptBreakdownScene(options) {
-  const [tags, setTags] = react.useState(options.preLoadedTags || []);
-  const [selectionMenu, setSelectionMenu] = react.useState(null);
-  const autoTaggedSceneRef = react.useRef(null);
-  const [scene, setScene] = react.useState(null);
-  const [menuPlacement, setMenuPlacement] = react.useState("top");
-  const [sceneBrief, setSceneBrief] = react.useState("");
-  const [isSummarizing, setIsSummarizing] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [error, setError] = react.useState(false);
-  const menuRef = react.useRef(null);
-  react.useEffect(() => {
+  const [tags, setTags] = React4.useState(options.preLoadedTags || []);
+  const [selectionMenu, setSelectionMenu] = React4.useState(null);
+  const autoTaggedSceneRef = React4.useRef(null);
+  const [scene, setScene] = React4.useState(null);
+  const [menuPlacement, setMenuPlacement] = React4.useState("top");
+  const [sceneBrief, setSceneBrief] = React4.useState("");
+  const [isSummarizing, setIsSummarizing] = React4.useState(false);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(false);
+  const menuRef = React4.useRef(null);
+  React4.useEffect(() => {
     setIsLoading(true);
     const fetchScene = async () => {
       try {
@@ -3908,7 +4680,7 @@ function useScriptBreakdownScene(options) {
     };
     fetchScene();
   }, []);
-  const blocks = react.useMemo(() => {
+  const blocks = React4.useMemo(() => {
     if (!scene || !scene.content) return [];
     const parser = new DOMParser();
     const doc = parser.parseFromString(scene.content, "text/html");
@@ -3939,7 +4711,7 @@ function useScriptBreakdownScene(options) {
     });
     return parsedBlocks;
   }, [scene]);
-  const characters = react.useMemo(() => {
+  const characters = React4.useMemo(() => {
     const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
       const text = b.text.trim().toUpperCase();
       const parenIndex = text.indexOf("(");
@@ -4017,7 +4789,7 @@ function useScriptBreakdownScene(options) {
       console.error("Failed to summarize scene:", res);
     }
   };
-  const bulkCreateTags = react.useCallback(async () => {
+  const bulkCreateTags = React4.useCallback(async () => {
     if (blocks.length === 0) return;
     const newTags = [];
     const seenCharacters = /* @__PURE__ */ new Set();
@@ -4125,11 +4897,11 @@ function useScriptBreakdownScene(options) {
       }
     }
   }, [blocks, tags, options.onTagsBulkAdded]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     setSceneBrief("");
     autoTaggedSceneRef.current = null;
   }, [options.scene_url]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (options.preLoadedTags && options.preLoadedTags.length > 0) {
       setTags((prev) => {
         if (JSON.stringify(prev) === JSON.stringify(options.preLoadedTags)) {
@@ -4139,7 +4911,7 @@ function useScriptBreakdownScene(options) {
       });
     }
   }, [options.preLoadedTags]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const doBulkCreate = async () => {
       if (blocks.length === 0) return;
       if (options.preLoadedTagsLoading) return;
@@ -4156,17 +4928,17 @@ function useScriptBreakdownScene(options) {
     options.preLoadedTags,
     options.preLoadedTagsLoading
   ]);
-  const clearSelection = react.useCallback(() => {
+  const clearSelection = React4.useCallback(() => {
     var _a;
     setSelectionMenu(null);
     (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
   }, []);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (!selectionMenu) {
       setMenuPlacement("top");
     }
   }, [selectionMenu]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (selectionMenu && menuRef.current) {
       const rect = menuRef.current.getBoundingClientRect();
       if (menuPlacement === "top" && rect.top < 100) {
@@ -4176,7 +4948,7 @@ function useScriptBreakdownScene(options) {
       }
     }
   }, [selectionMenu, menuPlacement]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const handleClickOutside = (e) => {
       if (selectionMenu && !e.target.closest(".tag-menu")) {
         clearSelection();
@@ -4347,7 +5119,7 @@ function ModalLayout({
   maxWidth = "max-w-4xl",
   menuRef
 }) {
-  react.useEffect(() => {
+  React4.useEffect(() => {
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
@@ -4403,196 +5175,6 @@ function ModalLayout({
   );
 }
 var modal_layout_default = ModalLayout;
-var FormikSelect = ({
-  label,
-  name,
-  selectedOption,
-  optionData,
-  value,
-  disable,
-  divClasses,
-  valueProperty = "name",
-  labelProperty = "name",
-  label2propery,
-  brackets,
-  className,
-  enableRedAsterick = false,
-  disableOptionProperty = "disable",
-  disabledOptionText = "",
-  onChange
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
-      label,
-      enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      formik.Field,
-      {
-        name,
-        as: "select",
-        value,
-        disabled: disable,
-        onChange,
-        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("option", { selected: true, value: "", disabled: true, className: "capitalize", children: selectedOption }),
-          optionData == null ? void 0 : optionData.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "option",
-            {
-              value: option[valueProperty],
-              disabled: option[disableOptionProperty],
-              children: [
-                option[labelProperty],
-                label2propery ? brackets ? ` (${option[label2propery]})` : option[label2propery] : "",
-                " ",
-                option[disableOptionProperty] && `(${disabledOptionText})`
-              ]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
-      }
-    )
-  ] });
-};
-var FormikInput = (_a) => {
-  var _b = _a, {
-    label,
-    name,
-    type,
-    placeholder,
-    className,
-    labelClassName,
-    readOnly,
-    divClasses,
-    length,
-    disable,
-    min = 0,
-    max,
-    convertToText = false,
-    enableRedAsterick = false,
-    case_sensitivity = "normal"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "name",
-    "type",
-    "placeholder",
-    "className",
-    "labelClassName",
-    "readOnly",
-    "divClasses",
-    "length",
-    "disable",
-    "min",
-    "max",
-    "convertToText",
-    "enableRedAsterick",
-    "case_sensitivity"
-  ]);
-  const { setFieldValue } = formik.useFormikContext();
-  const handleCaseChange = (e) => {
-    let value = e.target.value;
-    if (type === "number" && min !== void 0) {
-      if (value !== "" && Number(value) < min) return;
-    }
-    switch (case_sensitivity) {
-      case "lowercase":
-        value = value.toLowerCase();
-        break;
-      case "uppercase":
-        value = value.toUpperCase();
-        break;
-    }
-    setFieldValue(name, value);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: `${labelClassName} mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
-        children: [
-          label,
-          enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.Field,
-      __spreadProps(__spreadValues({
-        name,
-        placeholder,
-        readOnly,
-        type,
-        maxLength: length,
-        disabled: disable,
-        max,
-        min,
-        onChange: handleCaseChange
-      }, props), {
-        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
-      })
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
-      }
-    )
-  ] });
-};
-var FormikTextarea = ({
-  label,
-  name,
-  placeholder,
-  readOnly,
-  divClasses = "",
-  className = "",
-  length,
-  disable,
-  min,
-  max,
-  enableRedAsterick = false
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
-      label,
-      enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.Field,
-      {
-        as: "textarea",
-        name,
-        placeholder,
-        readOnly,
-        maxLength: length,
-        disabled: disable,
-        max,
-        min,
-        className: `${className} block w-full px-4 py-3 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 rounded-2xl focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
-      }
-    )
-  ] });
-};
 
 // data/shot-data.ts
 var shot_types = [
@@ -4863,8 +5445,8 @@ var AddShotForm = ({
     duration_seconds: Yup__namespace.number().min(0).required("Required"),
     camera_name: Yup__namespace.string().required("Required")
   });
-  const [step, setStep] = react.useState(1);
-  const [highestStep, setHighestStep] = react.useState(1);
+  const [step, setStep] = React4.useState(1);
+  const [highestStep, setHighestStep] = React4.useState(1);
   return /* @__PURE__ */ jsxRuntime.jsx(
     formik.Formik,
     {
@@ -5353,22 +5935,32 @@ var ProductionSetupModal = ({
   initialValues
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[80vh] flex items-center justify-center px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-8 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl font-semibold text-slate-900 tracking-tight", children: "Production Setup for this Scene" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 mt-2", children: "Configure your scene and camera setup to get started" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 md:p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
       formik.Formik,
       {
-        initialValues: initialValues || { numCameras: 1, scene_type: "" },
+        initialValues: initialValues || {
+          numCameras: 1,
+          scene_type: "",
+          dance_choreographer_required: false,
+          action_sequence_required: false
+        },
         validationSchema: Yup__namespace.object({
           numCameras: Yup__namespace.number().min(1, "Must be at least 1").max(20, "Cannot add more than 20 cameras").required("Number of cameras is required"),
           scene_type: Yup__namespace.string().required("Scene type is required")
         }),
         onSubmit: async (values) => {
-          await initializeProduction(values.numCameras, values.scene_type);
+          await initializeProduction(
+            values.numCameras,
+            values.scene_type,
+            values.dance_choreographer_required,
+            values.action_sequence_required
+          );
         },
-        children: ({ isSubmitting, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: "flex flex-col gap-6", children: [
+        children: ({ isSubmitting, setFieldValue, values }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: "flex flex-col gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               FormikSelect,
@@ -5391,7 +5983,65 @@ var ProductionSetupModal = ({
                 max: 20,
                 enableRedAsterick: true
               }
-            )
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `relative p-5 rounded-3xl border transition-all duration-300 flex flex-col gap-4 group cursor-pointer ${values.dance_choreographer_required ? "bg-blumine-50/30 border-blumine-200 shadow-sm" : "bg-slate-50/50 border-slate-100 hover:border-slate-200"}`,
+                  onClick: () => setFieldValue(
+                    "dance_choreographer_required",
+                    !values.dance_choreographer_required
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[15px] font-bold text-slate-800", children: "Dance Sequence" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-slate-500 font-medium mt-0.5", children: "Choreography needed" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Switch,
+                      {
+                        isOn: values.dance_choreographer_required || false,
+                        handleToggle: () => setFieldValue(
+                          "dance_choreographer_required",
+                          !values.dance_choreographer_required
+                        ),
+                        activeColor: "bg-blumine-600",
+                        divClasses: "w-fit!"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `relative p-5 rounded-3xl border transition-all duration-300 flex flex-col gap-4 group cursor-pointer ${values.action_sequence_required ? "bg-rose-50/30 border-rose-200 shadow-sm" : "bg-slate-50/50 border-slate-100 hover:border-slate-200"}`,
+                  onClick: () => setFieldValue(
+                    "action_sequence_required",
+                    !values.action_sequence_required
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[15px] font-bold text-slate-800", children: "Action Sequence" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-slate-500 font-medium mt-0.5", children: "Stunt & combat logic" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Switch,
+                      {
+                        isOn: values.action_sequence_required || false,
+                        handleToggle: () => setFieldValue(
+                          "action_sequence_required",
+                          !values.action_sequence_required
+                        ),
+                        activeColor: "bg-rose-500",
+                        divClasses: "w-fit!"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 bg-slate-50 border border-slate-100 p-4 rounded-xl", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-5 h-5 text-slate-400 shrink-0 mt-0.5" }),
@@ -5625,18 +6275,18 @@ function ShotBreakdownView({
 }) {
   var _a, _b, _c;
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  const containerRef = react.useRef(null);
-  const [isSidebarOpen, setIsSidebarOpen] = react.useState(false);
-  const [toggledShotId, setToggledShotId] = react.useState(
+  const containerRef = React4.useRef(null);
+  const [isSidebarOpen, setIsSidebarOpen] = React4.useState(false);
+  const [toggledShotId, setToggledShotId] = React4.useState(
     null
   );
-  const [viewingShotId, setViewingShotId] = react.useState(
+  const [viewingShotId, setViewingShotId] = React4.useState(
     null
   );
-  const [updatingShotId, setUpdatingShotId] = react.useState(
+  const [updatingShotId, setUpdatingShotId] = React4.useState(
     null
   );
-  const [isInitModalOpen, setIsInitModalOpen] = react.useState(false);
+  const [isInitModalOpen, setIsInitModalOpen] = React4.useState(false);
   const handleCloseModal = () => {
     clearSelection();
   };
@@ -5687,7 +6337,7 @@ function ShotBreakdownView({
     }
     return nodes;
   };
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
     if (!document.getElementById(fontId)) {
@@ -5933,14 +6583,21 @@ function ShotBreakdownView({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               production_setup_modal_default,
               {
-                initializeProduction: (count, type) => {
-                  initializeProduction(count, type).then(() => {
+                initializeProduction: (count, type, dance_choreographer_required, action_sequence_required) => {
+                  initializeProduction(
+                    count,
+                    type,
+                    dance_choreographer_required,
+                    action_sequence_required
+                  ).then(() => {
                     setIsInitModalOpen(false);
                   });
                 },
                 initialValues: {
                   numCameras: cameras.length || 1,
-                  scene_type: sceneType
+                  scene_type: sceneType,
+                  dance_choreographer_required: false,
+                  action_sequence_required: false
                 }
               }
             )
@@ -5983,20 +6640,20 @@ function ShotBreakdownView({
   );
 }
 function useShotBreakdownScene(options) {
-  const [shots, setShots] = react.useState(options.preloadedShots || []);
-  const [cameras, setCameras] = react.useState(
+  const [shots, setShots] = React4.useState(options.preloadedShots || []);
+  const [cameras, setCameras] = React4.useState(
     options.preloadedCameras || []
   );
-  const [sceneType, setSceneType] = react.useState(
+  const [sceneType, setSceneType] = React4.useState(
     options.preloadedSceneType || ""
   );
-  const [scene, setScene] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [isSummarizing, setIsSummarizing] = react.useState(false);
-  const [error, setError] = react.useState(false);
-  const [selectionMenu, setSelectionMenu] = react.useState(null);
-  const menuRef = react.useRef(null);
-  react.useEffect(() => {
+  const [scene, setScene] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [isSummarizing, setIsSummarizing] = React4.useState(false);
+  const [error, setError] = React4.useState(false);
+  const [selectionMenu, setSelectionMenu] = React4.useState(null);
+  const menuRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (options.preloadedShots && options.preloadedShots.length > 0) {
       setShots((prev) => {
         if (JSON.stringify(prev) === JSON.stringify(options.preloadedShots)) {
@@ -6006,7 +6663,7 @@ function useShotBreakdownScene(options) {
       });
     }
   }, [options.preloadedShots]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (options.preloadedCameras && options.preloadedCameras.length > 0) {
       setCameras((prev) => {
         if (JSON.stringify(prev) === JSON.stringify(options.preloadedCameras)) {
@@ -6016,7 +6673,7 @@ function useShotBreakdownScene(options) {
       });
     }
   }, [options.preloadedCameras]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (options.preloadedSceneType) {
       setSceneType((prev) => {
         if (prev === options.preloadedSceneType) return prev;
@@ -6024,7 +6681,7 @@ function useShotBreakdownScene(options) {
       });
     }
   }, [options.preloadedSceneType]);
-  react.useEffect(() => {
+  React4.useEffect(() => {
     setIsLoading(true);
     const fetchScene = async () => {
       try {
@@ -6045,7 +6702,7 @@ function useShotBreakdownScene(options) {
     };
     fetchScene();
   }, []);
-  const blocks = react.useMemo(() => {
+  const blocks = React4.useMemo(() => {
     if (!scene || !scene.content) return [];
     const parser = new DOMParser();
     const doc = parser.parseFromString(scene.content, "text/html");
@@ -6081,7 +6738,7 @@ function useShotBreakdownScene(options) {
     setSelectionMenu(null);
     (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
   };
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         clearSelection();
@@ -6156,13 +6813,19 @@ function useShotBreakdownScene(options) {
       });
     }
   };
-  const initializeProduction = async (count, type) => {
+  const initializeProduction = async (count, type, dance_choreographer_required, action_sequence_required) => {
     var _a;
     const newCameras = [];
     for (let i = 1; i <= count; i++) {
       newCameras.push({ name: `Camera ${String.fromCharCode(64 + i)}` });
     }
-    const result = (_a = options.onProductionInitialized) == null ? void 0 : _a.call(options, newCameras, type);
+    const result = (_a = options.onProductionInitialized) == null ? void 0 : _a.call(
+      options,
+      newCameras,
+      type,
+      dance_choreographer_required,
+      action_sequence_required
+    );
     if (result instanceof Promise) {
       setCameras(newCameras);
       setSceneType(type);
@@ -6293,7 +6956,7 @@ function SceneScriptView({
   title
 }) {
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  react.useEffect(() => {
+  React4.useEffect(() => {
     const fontId = "google-font-courier-prime";
     const styleId = "screenplay-editor-force-v4";
     if (!document.getElementById(fontId)) {
@@ -6359,10 +7022,10 @@ function SceneScriptView({
   );
 }
 function useSceneScript(options) {
-  const [sceneContent, setSceneContent] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  react.useEffect(() => {
+  const [sceneContent, setSceneContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
     let isMounted = true;
     setIsLoading(true);
     setError(null);
@@ -6394,7 +7057,7 @@ function useSceneScript(options) {
       isMounted = false;
     };
   }, [options.scene_url]);
-  const blocks = react.useMemo(() => {
+  const blocks = React4.useMemo(() => {
     if (!sceneContent) return [];
     const parser = new DOMParser();
     const doc = parser.parseFromString(sceneContent, "text/html");