@vishu1301/script-writing 1.4.2 → 1.4.4

package/dist/index.cjs

@@ -74,12 +74,12 @@ var blockTypes = [
 ];
 var uuid = () => Math.random().toString(36).slice(2, 9);
 var icons = {
-  SCENE_HEADING: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clapperboard, { className: "w-5 h-5" }),
-  ACTION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-5 h-5" }),
-  CHARACTER: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRound, { className: "w-5 h-5" }),
-  PARENTHETICAL: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brackets, { className: "w-5 h-5" }),
-  DIALOGUE: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: "w-5 h-5" }),
-  TRANSITION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightLeft, { className: "w-5 h-5" })
+  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" })
 };
 var blockStyles = {
   SCENE_HEADING: {
@@ -346,9 +346,18 @@ function ScreenplayEditorView({
   handleScriptImport,
   onSave,
   onSaveAsPdf,
-  onSaveAsSbx,
   onSyncWithCloud,
-  handleSceneNumberChange
+  handleSceneNumberChange,
+  handleEnhance,
+  handleApproveEnhance,
+  handleRejectEnhance,
+  enhancingBlockId,
+  enhancementSuggestion,
+  isEnhancing,
+  showUnsavedPopover,
+  syncScreenplay,
+  ignoreChanges,
+  isLoading = false
 }) {
   const [isRulesOpen, setIsRulesOpen] = react.useState(false);
   const rulesRef = react.useRef(null);
@@ -392,9 +401,15 @@ 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-5xl bg-white/80 backdrop-blur-2xl border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.06)] rounded-[1.5rem] sm:rounded-[2rem] flex items-center justify-between p-1.5 sm:p-2 mb-6 sm:mb-12 select-none transition-all", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1 overflow-x-auto custom-scrollbar pr-2  flex-1 [mask-image:linear-gradient(to_right,white_90%,transparent_100%)] sm:[mask-image:none] no-scrollbar", children: blockTypes.map((type) => {
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-2 sm:top-6 z-50 mx-auto w-full max-w-full 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) => {
         var _a;
         const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -402,67 +417,37 @@ function ScreenplayEditorView({
           {
             type: "button",
             disabled: isLocked,
-            className: `group flex shrink-0 items-center gap-2 sm:gap-2.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full font-semibold text-xs sm:text-sm transition-all duration-300 ease-out active:scale-95 ${selected ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
             onClick: () => handleBlockTypeChange(type),
+            className: `group 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(
-                "input",
+                "div",
                 {
-                  type: "radio",
-                  name: "blockType",
-                  id: `block-type-${type}`,
-                  className: "sr-only",
-                  "aria-label": blockStyles[type].label,
-                  checked: selected,
-                  readOnly: true
+                  className: `flex items-center justify-center transition-opacity duration-200 ${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"}`,
+                  children: icons[type]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "label",
-                {
-                  htmlFor: `block-type-${type}`,
-                  className: "flex items-center gap-2 cursor-pointer pointer-events-none",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200 flex items-center justify-center`,
-                        children: icons[type]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap hidden lg:inline tracking-wide", children: blockStyles[type].label })
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline tracking-wide", children: blockStyles[type].label })
             ]
           },
           type
         );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 relative px-1 sm:px-2 ml-2 sm:ml-0 border-l border-zinc-200/80 sm:border-none pl-2 sm:pl-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-1 sm:mx-2 hidden sm:block rounded-full" }),
+      /* @__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",
-              {
-                title: "Import Script",
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
-              }
-            )
+            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: `flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full transition-all duration-200 active:scale-95 ${isLocked ? "text-rose-500 hover:bg-rose-50" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
-            title: isLocked ? "Unlock Script" : "Lock Script",
-            "aria-label": isLocked ? "Unlock Script" : "Lock Script",
+            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]" })
           }
         ),
@@ -470,9 +455,7 @@ function ScreenplayEditorView({
           "button",
           {
             onClick: onSave,
-            className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-            title: "Save Script",
-            "aria-label": "Save Script",
+            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]" })
           }
         ),
@@ -480,9 +463,7 @@ function ScreenplayEditorView({
           "button",
           {
             onClick: onSaveAsPdf,
-            className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-            title: "Save as PDF",
-            "aria-label": "Save Script as PDF",
+            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]" })
           }
         ),
@@ -490,9 +471,7 @@ function ScreenplayEditorView({
           "button",
           {
             onClick: onSyncWithCloud,
-            className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-            title: "Sync with Cloud",
-            "aria-label": "Sync with Cloud",
+            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]" })
           }
         ),
@@ -501,35 +480,65 @@ function ScreenplayEditorView({
             "button",
             {
               onClick: () => setIsRulesOpen(!isRulesOpen),
-              className: `flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
-              title: "Settings & Shortcuts",
-              "aria-label": "Toggle Settings",
+              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]" })
             }
           ),
-          isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full mt-2 right-0 sm:-right-2 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] p-4 sm:p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-[calc(100vw-2rem)] sm:w-72 max-w-[18rem] origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4 text-zinc-400" }),
-              "Settings & Shortcuts"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
-                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Enter" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
-                /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Backspace" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Ctrl" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "\u2191/\u2193" })
-                ] })
+          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" }) }),
+              /* @__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("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",
+                      {
+                        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
+            )) })
           ] })
         ] })
       ] })
@@ -729,7 +738,7 @@ function ScreenplayEditorView({
                           handleBlur(block.id);
                         },
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-sky-500 transition-colors mr-3" }),
+                          /* @__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" })
                         ]
@@ -765,6 +774,64 @@ function ScreenplayEditorView({
                       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-[30] 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" })
+                    ]
+                  }
                 )
               ] })
             },
@@ -772,7 +839,43 @@ function ScreenplayEditorView({
           );
         })
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `sticky bottom-0 left-1/2 -translate-x-1/2 z-[100] transition-all duration-500 ease-in-out ${showUnsavedPopover ? "translate-y-0 opacity-100 scale-100" : "translate-y-full opacity-0 scale-95 pointer-events-none"}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-full rounded-[2.5rem] bg-white 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.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"
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    )
   ] });
 }
 
@@ -980,6 +1083,31 @@ function parseScreenplayText(content) {
   }
   return blocks.length > 0 ? blocks : [createNewBlock("SCENE_HEADING")];
 }
+function serializeToSbx(blocks) {
+  const typeToDivClass = {
+    SCENE_HEADING: "divtype0",
+    ACTION: "divtype2",
+    CHARACTER: "divtype3",
+    PARENTHETICAL: "divtype4",
+    DIALOGUE: "divtype5",
+    TRANSITION: "divtype6",
+    GENERAL: "divtype2"
+  };
+  return blocks.map((block) => {
+    const divClass = typeToDivClass[block.type] || "divtype2";
+    let text = block.text || "";
+    let extraAttributes = "";
+    if (block.type === "SCENE_HEADING") {
+      text = `${block.sceneType || "INT."} ${text} - ${block.timeOfDay || "DAY"}`.toUpperCase();
+      if (block.sceneNumber) {
+        extraAttributes = ` data-scene="${block.sceneNumber}"`;
+      }
+    } else if (block.type === "CHARACTER" || block.type === "TRANSITION") {
+      text = text.toUpperCase();
+    }
+    return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
+  }).join("");
+}
 
 // app/hook/use-screenplay-editor.ts
 var initialBlocks = [
@@ -1048,13 +1176,23 @@ function useScreenplayEditor(options) {
   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);
   react.useEffect(() => {
     onSaveRef.current = options == null ? void 0 : options.onSave;
-  }, [options == null ? void 0 : options.onSave]);
+    onSyncWithCloudRef.current = options == null ? void 0 : options.onSyncWithCloud;
+  }, [options == null ? void 0 : options.onSave, options == null ? void 0 : options.onSyncWithCloud]);
   const characterExtensions = react.useMemo(
     () => ["(V.O.)", "(O.S.)", "(O.C.)", "(SUBTITLE)", "(CONT'D)"],
     []
@@ -1441,29 +1579,7 @@ function useScreenplayEditor(options) {
         });
         setBlocks(finalizedBlocks);
         if (onSaveRef.current) {
-          const typeToDivClass = {
-            SCENE_HEADING: "divtype0",
-            ACTION: "divtype2",
-            CHARACTER: "divtype3",
-            PARENTHETICAL: "divtype4",
-            DIALOGUE: "divtype5",
-            TRANSITION: "divtype6",
-            GENERAL: "divtype2"
-          };
-          const sbxData = finalizedBlocks.map((block) => {
-            const divClass = typeToDivClass[block.type] || "divtype2";
-            let text = block.text || "";
-            let extraAttributes = "";
-            if (block.type === "SCENE_HEADING") {
-              text = `${block.sceneType || "INT."} ${text} - ${block.timeOfDay || "DAY"}`.toUpperCase();
-              if (block.sceneNumber) {
-                extraAttributes = ` data-scene="${block.sceneNumber}"`;
-              }
-            } else if (block.type === "CHARACTER" || block.type === "TRANSITION") {
-              text = text.toUpperCase();
-            }
-            return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
-          }).join("");
+          const sbxData = serializeToSbx(finalizedBlocks);
           if (sbxData !== lastSavedContent.current) {
             lastSavedContent.current = sbxData;
             if (!isInitialLoad) {
@@ -1516,9 +1632,22 @@ function useScreenplayEditor(options) {
       setShowExtensionSuggestions(false);
     }, 200);
   }, []);
+  const syncScreenplay = react.useCallback(() => {
+    if (!onSyncWithCloudRef.current) return;
+    onSyncWithCloudRef.current(blocks, sceneNumbers);
+    lastSavedContent.current = serializeToSbx(blocks);
+    setHasUnsavedChanges(false);
+    setShowUnsavedPopover(false);
+    if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
+  }, [blocks, sceneNumbers]);
+  const ignoreChanges = react.useCallback(() => {
+    setShowUnsavedPopover(false);
+    if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
+  }, []);
   const loadFromUrl = react.useCallback(
     async (url, fetchOptions = {}, isInitialLoad) => {
       var _a;
+      setIsLoading(true);
       try {
         const response = await fetch(url, fetchOptions);
         if (!response.ok) {
@@ -1595,16 +1724,42 @@ function useScreenplayEditor(options) {
           preParsedBlocks,
           isInitialLoad
         );
-      } catch (error) {
-        console.error(
-          "[useScreenplayEditor] Error loading script from URL:",
-          error
-        );
-        throw error;
+      } finally {
+        setIsLoading(false);
       }
     },
     [handleScriptImport]
   );
+  react.useEffect(() => {
+    if (isLoading) {
+      isInitialLoadRef.current = true;
+      return;
+    }
+    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);
+    }
+    return () => {
+      if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
+    };
+  }, [blocks, isLoading]);
   react.useEffect(() => {
     if ((options == null ? void 0 : options.initialUrl) && options.initialUrl !== loadedUrlRef.current) {
       loadedUrlRef.current = options.initialUrl;
@@ -1621,6 +1776,7 @@ function useScreenplayEditor(options) {
     locations,
     characters,
     sceneNumbers,
+    isLoading,
     handleBlockTextChange,
     handleSceneTypeChange,
     handleTimeOfDayChange,
@@ -1631,6 +1787,61 @@ function useScreenplayEditor(options) {
     handleSceneNumberChange,
     handleFocus,
     handleBlur,
+    handleEnhance: async (block) => {
+      if (isEnhancing || enhancingBlockId || !(options == null ? void 0 : options.enhanceContentUrl))
+        return;
+      setEnhancingBlockId(block.id);
+      setIsEnhancing(true);
+      setEnhancementSuggestion(null);
+      try {
+        const res = await fetch(options == null ? void 0 : options.enhanceContentUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            mode: block.type.toLowerCase(),
+            script: block.text,
+            language: "English"
+          })
+        });
+        const data = await res.json();
+        const content = data.data;
+        setEnhancementSuggestion(content);
+      } catch (error) {
+        console.error("Failed to enhance block:", error);
+        if (error) {
+          setIsEnhancing(false);
+        }
+      } finally {
+        setIsEnhancing(false);
+      }
+    },
+    handleApproveEnhance: () => {
+      if (enhancingBlockId && enhancementSuggestion) {
+        setBlocks(
+          (bs) => updateBlock(
+            bs,
+            enhancingBlockId,
+            "text",
+            enhancementSuggestion
+          )
+        );
+      }
+      setEnhancingBlockId(null);
+      setEnhancementSuggestion(null);
+    },
+    handleRejectEnhance: () => {
+      setEnhancingBlockId(null);
+      setEnhancementSuggestion(null);
+    },
+    enhancingBlockId,
+    enhancementSuggestion,
+    isEnhancing,
+    hasUnsavedChanges,
+    showUnsavedPopover,
+    syncScreenplay,
+    ignoreChanges,
     loadFromUrl
   };
 }
@@ -4321,7 +4532,7 @@ function ShotBreakdownView({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-slate-50 border border-slate-100 mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-4 w-4 text-slate-300" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-700", children: "No shots created" }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-slate-500 mt-1 max-w-[160px] leading-relaxed", children: "Highlight text in the screenplay to add your first shot." })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2.5 overflow-y-auto overflow-x-hidden pb-4 pr-2 custom-scrollbar", children: shots.map((shot) => {
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full max-h-[calc(100vh-200px)] flex-col gap-2.5 overflow-y-auto overflow-x-hidden pb-4 pr-2 custom-scrollbar", children: shots.map((shot) => {
                   const isActive = toggledShotId === shot.id;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
@@ -4330,13 +4541,13 @@ function ShotBreakdownView({
                         var _a2;
                         return setToggledShotId(isActive ? null : (_a2 = shot.id) != null ? _a2 : null);
                       },
-                      className: `group relative cursor-pointer rounded-xl border transition-all duration-300 overflow-hidden ${isActive ? "border-slate-900 bg-slate-50 shadow-[0_6px_20px_rgba(0,0,0,0.06)]" : "border-slate-200 bg-white hover:border-slate-300 hover:shadow-[0_4px_14px_rgba(0,0,0,0.05)]"}`,
+                      className: `group relative flex-shrink-0 cursor-pointer rounded-xl border transition-all duration-300 overflow-hidden ${isActive ? "border-slate-900 bg-slate-50 shadow-[0_6px_20px_rgba(0,0,0,0.06)]" : "border-slate-200 bg-white hover:border-slate-300 hover:shadow-[0_4px_14px_rgba(0,0,0,0.05)]"}`,
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
                             className: `absolute left-0 top-0 h-full w-[3px] transition-all duration-300
-                          ${isActive ? "bg-slate-900" : "bg-transparent group-hover:bg-slate-300"}`
+            ${isActive ? "bg-slate-900" : "bg-transparent group-hover:bg-slate-300"}`
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 px-4 py-3.5", children: [
@@ -4346,7 +4557,7 @@ function ShotBreakdownView({
                                 "span",
                                 {
                                   className: `text-[11px] font-semibold tracking-wide uppercase
-                                ${isActive ? "text-slate-900" : "text-slate-500"}`,
+                  ${isActive ? "text-slate-900" : "text-slate-500"}`,
                                   children: [
                                     "Shot ",
                                     shot.shot_number
@@ -4358,7 +4569,7 @@ function ShotBreakdownView({
                             /* @__PURE__ */ jsxRuntime.jsx(
                               "span",
                               {
-                                className: `rounded-md px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider ${isActive ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-500 group-hover:bg-slate-200"}`,
+                                className: `rounded-md px-2 py-0.5 text-[8px] font-bold uppercase tracking-wider ${isActive ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-500 group-hover:bg-slate-200"}`,
                                 children: shot.shot_type
                               }
                             )
@@ -4370,8 +4581,8 @@ function ShotBreakdownView({
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
                             {
-                              className: `grid transition-all duration-300 ease-in-out ${isActive ? "grid-rows-[2fr] mt-2" : "grid-rows-[0fr]"}`,
-                              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-3 pb-4 border-t border-slate-200/70 flex gap-2", children: [
+                              className: `grid transition-all duration-300 ease-in-out ${isActive ? "grid-rows-[1fr] opacity-100 mt-2" : "grid-rows-[0fr] opacity-0"}`,
+                              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-3 pb-1 border-t border-slate-200/70 flex gap-2", children: [
                                 /* @__PURE__ */ jsxRuntime.jsxs(
                                   "button",
                                   {
@@ -4730,9 +4941,8 @@ function useShotBreakdownScene(options) {
       if (res && res.ok) {
         const data = await res.json();
         setIsSummarizing(false);
-        console.log(data);
         const newShots = [];
-        data.data.forEach((aiShot) => {
+        data.data[0].forEach((aiShot) => {
           var _a2;
           const newShot = {
             id: aiShot.id || uuid(),
@@ -4770,7 +4980,7 @@ function useShotBreakdownScene(options) {
         if (newShots.length > 0) {
           setShots((prev) => [...prev, ...newShots]);
           if (options.onShotsBulkAdded) {
-            await options.onShotsBulkAdded(newShots);
+            await options.onShotsBulkAdded(newShots, data.data[1]);
           }
         }
       } else {