@vishu1301/script-writing 1.3.2 → 1.3.4

package/dist/index.d.cts

@@ -92,7 +92,7 @@ declare const CATEGORIES: {
     icon: ElementType;
 }[];
 
-declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, }: {
+declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, onUpdateBrief, }: {
     blocks: Block[];
     characters: string[];
     isLoading: boolean;
@@ -118,6 +118,7 @@ declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, scene
     onSummarize?: () => void;
     isSummarizing?: boolean;
     aiSummarized?: boolean;
+    onUpdateBrief?: () => void;
 }): react_jsx_runtime.JSX.Element;
 
 interface UseScriptBreakdownSceneOptions {

package/dist/index.d.ts

@@ -92,7 +92,7 @@ declare const CATEGORIES: {
     icon: ElementType;
 }[];
 
-declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, }: {
+declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, onUpdateBrief, }: {
     blocks: Block[];
     characters: string[];
     isLoading: boolean;
@@ -118,6 +118,7 @@ declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, scene
     onSummarize?: () => void;
     isSummarizing?: boolean;
     aiSummarized?: boolean;
+    onUpdateBrief?: () => void;
 }): react_jsx_runtime.JSX.Element;
 
 interface UseScriptBreakdownSceneOptions {

package/dist/index.js

@@ -270,9 +270,9 @@ function PdfImporter({ onScriptImported, disabled, children }) {
       {
         onClick: handleClick,
         disabled: isProcessing || disabled,
-        className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:shadow-none disabled:border-zinc-600/50",
+        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__ */ jsx("span", { className: "text-sm font-semibold", children: "Processing..." }) : children
+        children: isProcessing ? /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-semibold", children: "Processing..." }) : children
       }
     ),
     error && /* @__PURE__ */ jsxs("p", { className: "sr-only", children: [
@@ -353,150 +353,148 @@ function ScreenplayEditorView({
     }
   }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "sticky top-6 z-50 mx-auto bg-white/70 backdrop-blur-2xl border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2rem] flex items-center justify-between p-2 mb-12 select-none transition-all",
-        style: {
-          maxWidth: "1240px"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto custom-scrollbar pr-2 items-center", children: blockTypes.map((type) => {
-            var _a;
-            const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                disabled: isLocked,
-                className: `group flex items-center gap-2.5 px-4 py-2 rounded-full font-semibold text-sm transition-all duration-300 ease-out active:scale-95 ${selected ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
-                onClick: () => handleBlockTypeChange(type),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "radio",
-                      name: "blockType",
-                      id: `block-type-${type}`,
-                      className: "sr-only",
-                      "aria-label": blockStyles[type].label,
-                      checked: selected,
-                      readOnly: true
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "label",
-                    {
-                      htmlFor: `block-type-${type}`,
-                      className: "flex items-center gap-2 cursor-pointer pointer-events-none",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200`,
-                            children: icons[type]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline tracking-wide", children: blockStyles[type].label })
-                      ]
-                    }
-                  )
-                ]
-              },
-              type
-            );
-          }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
-            showPdfImport && !isLocked && /* @__PURE__ */ jsx(
-              PdfImporter,
-              {
-                disabled: isLocked,
-                onScriptImported: handleScriptImport,
-                children: /* @__PURE__ */ jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsx(Upload, { className: "w-[18px] h-[18px]" }) })
-              }
-            ),
-            onToggleLock && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onToggleLock,
-                className: `flex items-center justify-center w-10 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",
-                children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "w-[18px] h-[18px]" }) : /* @__PURE__ */ jsx(Unlock, { className: "w-[18px] h-[18px]" })
-              }
-            ),
-            onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onSave,
-                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-                title: "Save Script",
-                "aria-label": "Save Script",
-                children: /* @__PURE__ */ jsx(Save, { className: "w-[18px] h-[18px]" })
-              }
-            ),
-            onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onSaveAsPdf,
-                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-                title: "Save as PDF",
-                "aria-label": "Save Script as PDF",
-                children: /* @__PURE__ */ jsx(FileDown, { className: "w-[18px] h-[18px]" })
-              }
-            ),
-            onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onSyncWithCloud,
-                className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
-                title: "Sync with Cloud",
-                "aria-label": "Sync with Cloud",
-                children: /* @__PURE__ */ jsx(RefreshCcw, { className: "w-[18px] h-[18px]" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
+    /* @__PURE__ */ 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__ */ 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) => {
+        var _a;
+        const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            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),
+            children: [
               /* @__PURE__ */ jsx(
-                "button",
+                "input",
                 {
-                  onClick: () => setIsRulesOpen(!isRulesOpen),
-                  className: `flex items-center justify-center w-10 h-10 rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
-                  title: "Settings & Shortcuts",
-                  "aria-label": "Toggle Settings",
-                  children: /* @__PURE__ */ jsx(Cog, { className: "w-[18px] h-[18px]" })
+                  type: "radio",
+                  name: "blockType",
+                  id: `block-type-${type}`,
+                  className: "sr-only",
+                  "aria-label": blockStyles[type].label,
+                  checked: selected,
+                  readOnly: true
                 }
               ),
-              isRulesOpen && /* @__PURE__ */ jsxs("div", { className: "absolute top-full mt-2 right-0 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-72 origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
-                /* @__PURE__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
-                  "Settings & Shortcuts"
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
-                  /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
-                    /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Enter" })
-                  ] }),
-                  /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
-                    /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Backspace" })
-                  ] }),
-                  /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Ctrl" }),
-                      /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
-                      /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "\u2191/\u2193" })
-                    ] })
-                  ] })
-                ] }) })
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: `block-type-${type}`,
+                  className: "flex items-center gap-2 cursor-pointer pointer-events-none",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200 flex items-center justify-center`,
+                        children: icons[type]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden lg:inline tracking-wide", children: blockStyles[type].label })
+                  ]
+                }
+              )
+            ]
+          },
+          type
+        );
+      }) }),
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-1 sm:mx-2 hidden sm:block rounded-full" }),
+        showPdfImport && !isLocked && /* @__PURE__ */ jsx(
+          PdfImporter,
+          {
+            disabled: isLocked,
+            onScriptImported: handleScriptImport,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                title: "Import Script",
+                className: "flex items-center justify-center",
+                children: /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+              }
+            )
+          }
+        ),
+        onToggleLock && /* @__PURE__ */ 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",
+            children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) : /* @__PURE__ */ jsx(Unlock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+          }
+        ),
+        onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+          }
+        ),
+        onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(FileDown, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+          }
+        ),
+        onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
+            }
+          ),
+          isRulesOpen && /* @__PURE__ */ 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__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
+              "Settings & Shortcuts"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
+              /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
+                /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Enter" })
+              ] }),
+              /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
+                /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Backspace" })
+              ] }),
+              /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Ctrl" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
+                  /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "\u2191/\u2193" })
+                ] })
               ] })
-            ] })
+            ] }) })
           ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-[297mm] shrink-0",
@@ -1812,7 +1810,8 @@ function ScriptBreakdownSceneView({
   setSceneBrief,
   onSummarize,
   isSummarizing,
-  aiSummarized = false
+  aiSummarized = false,
+  onUpdateBrief
 }) {
   const [expanded, setExpanded] = useState(false);
   const [expandedCategories, setExpandedCategories] = useState({});
@@ -1906,7 +1905,7 @@ function ScriptBreakdownSceneView({
     }
     return nodes;
   };
-  return /* @__PURE__ */ jsx("div", { className: "relative p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8 xl:pr-[20rem]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center max-w-6xl", children: [
+  return /* @__PURE__ */ jsx("div", { className: "relative p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8 xl:pr-[20rem]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center max-w-6xl xl:max-w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 min-h-screen", children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -2032,18 +2031,29 @@ function ScriptBreakdownSceneView({
           /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-100/80 shadow-inner border border-slate-200/50", children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
           "Scene Brief"
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative bg-zinc-50/50 border border-zinc-200/60 rounded-xl p-4 md:p-6 shadow-inner focus-within:bg-white focus-within:border-zinc-300 focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300", children: /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            value: sceneBrief,
-            onChange: (e) => setSceneBrief(e.target.value),
-            placeholder: "Write a brief description or notes for this scene...",
-            className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans select-none",
-            style: {
-              lineHeight: "1.6"
+        /* @__PURE__ */ jsxs("div", { className: "relative bg-zinc-50/50 border border-zinc-200/60 rounded-xl p-4 md:p-6 shadow-inner focus-within:bg-white focus-within:border-zinc-300 focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: sceneBrief,
+              onChange: (e) => setSceneBrief(e.target.value),
+              placeholder: "Write a brief description or notes for this scene...",
+              className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans select-none",
+              style: {
+                lineHeight: "1.6"
+              }
             }
-          }
-        ) })
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onUpdateBrief,
+              disabled: !sceneBrief || sceneBrief.trim() === "",
+              className: "rounded-full bg-[#15607b] px-6 py-3 text-[13px] font-semibold tracking-wide text-white shadow-md transition-all hover:bg-[#134a61] hover:shadow-lg active:scale-95 disabled:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-95 disabled:text-black disabled:shadow-none",
+              children: "Update"
+            }
+          ) })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -2084,7 +2094,7 @@ function ScriptBreakdownSceneView({
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "rounded-full border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold text-[#134a61] shadow-sm backdrop-blur-md", children: tags.length }) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 overflow-y-auto custom-scrollbar", children: CATEGORIES.map((cat) => {
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 overflow-y-auto overflow-x-hidden pb-4 pr-1 custom-scrollbar", children: CATEGORIES.map((cat) => {
               const catTags = tags.filter((t) => t.category_id === cat.id);
               if (!catTags.length) return null;
               const isExpanded = expandedCategories[cat.id];
@@ -2097,7 +2107,7 @@ function ScriptBreakdownSceneView({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    onClick: () => setExpandedCategories((prev) => __spreadProps(__spreadValues({}, prev), {
+                    onClick: () => setExpandedCategories((prev) => ({
                       [cat.id]: !prev[cat.id]
                     })),
                     className: "group relative flex cursor-pointer items-center gap-3 overflow-hidden rounded-[24px] border border-white/70 px-4 py-3.5 transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-[1px]",
@@ -2153,7 +2163,8 @@ function ScriptBreakdownSceneView({
                     children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-start gap-2 py-2", children: uniqueTags.map((tag, index) => /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: "text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300",
+                        title: tag.name,
+                        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",
                         style: {
                           color: cat.color,
                           background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,