@vishu1301/script-writing 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -152,7 +152,7 @@ var blockStyles = {
   }
 };
 pdfjs__namespace.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs__namespace.version}/build/pdf.worker.min.mjs`;
-function PdfImporter({ onScriptImported, children }) {
+function PdfImporter({ onScriptImported, disabled, children }) {
   const [isProcessing, setIsProcessing] = react.useState(false);
   const [error, setError] = react.useState(null);
   const fileInputRef = react.useRef(null);
@@ -256,7 +256,7 @@ function PdfImporter({ onScriptImported, children }) {
           title = await processPage(1);
         }
         let scriptContent = "";
-        for (let i = 2; i <= pdf.numPages; i++) {
+        for (let i = 1; i <= pdf.numPages; i++) {
           scriptContent += await processPage(i) + "\n\n";
         }
         onScriptImported(title.trim(), scriptContent);
@@ -285,7 +285,7 @@ function PdfImporter({ onScriptImported, children }) {
         type: "file",
         accept: ".pdf,application/pdf",
         onChange: handleFileChange,
-        disabled: isProcessing,
+        disabled: isProcessing || disabled,
         className: "hidden",
         id: "pdf-importer-input"
       }
@@ -294,8 +294,8 @@ function PdfImporter({ onScriptImported, children }) {
       "button",
       {
         onClick: handleClick,
-        disabled: isProcessing,
-        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: 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",
         "aria-label": "Import Script",
         children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Processing..." }) : children
       }
@@ -318,6 +318,8 @@ function ScreenplayEditorView({
   showPdfImport = false,
   showSaveButton = false,
   showSyncButton = false,
+  isLocked = false,
+  onToggleLock,
   handleBlockTextChange,
   handleSceneTypeChange,
   handleTimeOfDayChange,
@@ -391,7 +393,8 @@ function ScreenplayEditorView({
               "button",
               {
                 type: "button",
-                className: `group flex items-center gap-2.5 px-4 py-2 rounded-full font-semibold text-sm transition-all duration-300 ease-out active:scale-95 ${selected ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
+                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__ */ jsxRuntime.jsx(
@@ -430,8 +433,18 @@ function ScreenplayEditorView({
           }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
-            showPdfImport && /* @__PURE__ */ jsxRuntime.jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxRuntime.jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-[18px] h-[18px]" }) }) }),
-            onSave && showSaveButton && /* @__PURE__ */ jsxRuntime.jsx(
+            showPdfImport && /* @__PURE__ */ jsxRuntime.jsx(PdfImporter, { disabled: isLocked, onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxRuntime.jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-[18px] h-[18px]" }) }) }),
+            onToggleLock && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-[18px] h-[18px]" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-[18px] h-[18px]" })
+              }
+            ),
+            onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: onSave,
@@ -451,7 +464,7 @@ function ScreenplayEditorView({
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-[18px] h-[18px]" })
               }
             ),
-            onSyncWithCloud && showSyncButton && /* @__PURE__ */ jsxRuntime.jsx(
+            onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: onSyncWithCloud,
@@ -472,7 +485,7 @@ function ScreenplayEditorView({
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-[18px] h-[18px]" })
                 }
               ),
-              isRulesOpen && /* @__PURE__ */ jsxRuntime.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)] ring-1 ring-zinc-900/5 p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-72 origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
+              isRulesOpen && /* @__PURE__ */ jsxRuntime.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__ */ 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"
@@ -528,6 +541,7 @@ function ScreenplayEditorView({
                     {
                       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,
@@ -548,6 +562,7 @@ function ScreenplayEditorView({
                     {
                       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: {
@@ -567,7 +582,7 @@ function ScreenplayEditorView({
                         if (!el) return;
                         refs.current[block.id] = el;
                       },
-                      contentEditable: true,
+                      contentEditable: !isLocked,
                       suppressContentEditableWarning: true,
                       "aria-label": `Scene Heading: ${block.text}`,
                       "aria-haspopup": "listbox",
@@ -592,6 +607,7 @@ function ScreenplayEditorView({
                     {
                       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"
@@ -647,7 +663,7 @@ function ScreenplayEditorView({
                       if (!el) return;
                       refs.current[block.id] = el;
                     },
-                    contentEditable: true,
+                    contentEditable: !isLocked,
                     suppressContentEditableWarning: true,
                     "aria-label": `${blockStyles[block.type].label} text`,
                     "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
@@ -1728,13 +1744,14 @@ var handleSyncWithCloud = (blocks, sceneNumbers, onSaveAsSbx, project_name) => {
 
 // app/types/script-breakdown.types.tsx
 var CATEGORIES = [
-  { id: "CAST", label: "Cast", color: "#7c3aed", hex: "#8b5cf6" },
-  { id: "PROP", label: "Prop", color: "#ea580c", hex: "#f97316" },
-  { id: "COSTUME", label: "Costume", color: "#db2777", hex: "#ec4899" },
-  { id: "VEHICLE", label: "Vehicle", color: "#2563eb", hex: "#3b82f6" },
-  { id: "SET_PROP", label: "Set Prop", color: "#16a34a", hex: "#22c55e" },
-  { id: "EXTRA", label: "Extra", color: "#0d9488", hex: "#14b8a6" },
-  { id: "LOCATION", label: "Location", color: "#ca8a04", hex: "#eab308" }
+  { id: "CAST", label: "Cast", color: "#7C3AED", hex: "#A78BFA" },
+  { id: "PROP", label: "Prop", color: "#FF6A00", hex: "#FFB86B" },
+  { id: "COSTUME", label: "Costume", color: "#FF2E93", hex: "#FF8AC2" },
+  { id: "VEHICLE", label: "Vehicle", color: "#00A6FF", hex: "#6ED6FF" },
+  { id: "SET_PROP", label: "Set Prop", color: "#00C853", hex: "#69F0AE" },
+  { id: "EXTRA", label: "Extra", color: "#00B8D4", hex: "#62EFFF" },
+  { id: "LOCATION", label: "Location", color: "#FFB300", hex: "#FFE082" },
+  { id: "OTHER", label: "Other", color: "#9E9E9E", hex: "#E0E0E0" }
 ];
 function ScriptBreakdownSceneView({
   blocks,
@@ -1753,7 +1770,9 @@ function ScriptBreakdownSceneView({
   addSubLocation,
   removeSubLocation,
   sceneBrief,
-  setSceneBrief
+  setSceneBrief,
+  onSummarize,
+  isSummarizing
 }) {
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
   const [isSubLocOpen, setIsSubLocOpen] = react.useState(false);
@@ -1800,47 +1819,54 @@ function ScriptBreakdownSceneView({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
     ] });
   }
-  const hasLocationTag = tags.some((t) => t.categoryId === "LOCATION");
+  const hasLocationTag = tags.some((t) => t.category_id === "LOCATION");
   const renderBlockText = (block) => {
-    const blockTags = tags.filter((t) => t.blockId === block.id).sort((a, b) => a.startIndex - b.startIndex);
+    const blockTags = tags.filter((t) => t.block_id === block.id).sort((a, b) => a.start_index - b.start_index);
     if (blockTags.length === 0) return block.text;
     const nodes = [];
     let currentIndex = 0;
     blockTags.forEach((tag) => {
-      if (tag.startIndex > currentIndex) {
+      const actualStart = Math.max(tag.start_index, currentIndex);
+      if (actualStart > currentIndex) {
         nodes.push(
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex, tag.startIndex) }, `text-${currentIndex}`)
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex, actualStart) }, `text-${currentIndex}`)
         );
       }
-      const category = CATEGORIES.find((c) => c.id === tag.categoryId);
-      nodes.push(
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            title: `${category == null ? void 0 : category.label} (Click to edit)`,
-            onClick: (e) => {
-              e.stopPropagation();
-              const selection = window.getSelection();
-              if (!selection) return;
-              const range = document.createRange();
-              const textNode = e.currentTarget.firstChild;
-              if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-                range.selectNodeContents(textNode);
-              } else {
-                range.selectNodeContents(e.currentTarget);
-              }
-              selection.removeAllRanges();
-              selection.addRange(range);
-              setTimeout(() => handleMouseUp(), 0);
+      const category = CATEGORIES.find((c) => c.id === tag.category_id);
+      if (actualStart < tag.end_index) {
+        nodes.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              title: `${category == null ? void 0 : category.label} (Click to edit)`,
+              onClick: (e) => {
+                e.stopPropagation();
+                const selection = window.getSelection();
+                if (!selection) return;
+                const range = document.createRange();
+                const textNode = e.currentTarget.firstChild;
+                if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                  range.selectNodeContents(textNode);
+                } else {
+                  range.selectNodeContents(e.currentTarget);
+                }
+                selection.removeAllRanges();
+                selection.addRange(range);
+                setTimeout(() => handleMouseUp(), 0);
+              },
+              className: "cursor-pointer font-bold transition-all hover:opacity-80 rounded-[3px]",
+              style: {
+                color: category == null ? void 0 : category.color,
+                padding: "0.125rem 0.25rem",
+                margin: "0 -0.125rem"
+              },
+              children: block.text.slice(actualStart, tag.end_index)
             },
-            className: "cursor-pointer font-bold transition-opacity hover:opacity-70",
-            style: { color: category == null ? void 0 : category.color },
-            children: block.text.slice(tag.startIndex, tag.endIndex)
-          },
-          tag.id
-        )
-      );
-      currentIndex = tag.endIndex;
+            tag.id || `tag-${actualStart}-${tag.end_index}`
+          )
+        );
+      }
+      currentIndex = Math.max(currentIndex, tag.end_index);
     });
     if (currentIndex < block.text.length) {
       nodes.push(
@@ -1928,16 +1954,16 @@ function ScriptBreakdownSceneView({
                           cat.id
                         )),
                         tags.some(
-                          (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
+                          (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
                         ) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxRuntime.jsxs(
                           "button",
                           {
                             onClick: (e) => {
                               const tagToRemove = tags.find(
-                                (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
+                                (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
                               );
-                              if (tagToRemove) {
-                                removeTag(e, tagToRemove.id);
+                              if (tagToRemove && tagToRemove.id) {
+                                removeTag(e, tagToRemove == null ? void 0 : tagToRemove.id);
                                 clearSelection();
                               }
                             },
@@ -1980,115 +2006,136 @@ function ScriptBreakdownSceneView({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white/80 shadow-[0_4px_15px_rgb(0,0,0,0.04)] border border-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
-        "Tags",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto bg-slate-100/80 text-slate-500 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-widest border border-slate-200/50 shadow-inner", children: tags.length })
-      ] }),
-      tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
-        const catTags = Array.from(
-          new Map(
-            tags.filter((t) => t.categoryId === cat.id).map((tag) => [tag.text.toLowerCase(), tag])
-          ).values()
-        );
-        if (catTags.length === 0) return null;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 border-b border-white/60 pb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "w-2 h-2 rounded-full shadow-sm",
-                style: { backgroundColor: cat.hex }
-              }
-            ),
-            cat.label,
-            cat.id === "LOCATION" && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "ml-auto relative",
-                ref: subLocPopoverRef,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => setIsSubLocOpen(!isSubLocOpen),
-                      className: "flex items-center justify-center w-5 h-5 rounded-full hover:bg-slate-200 transition-colors",
-                      title: "Add Sub Location",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 text-slate-500" })
-                    }
-                  ),
-                  isSubLocOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full mt-2 w-56 bg-white backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-3 z-50 animate-in fade-in zoom-in-95", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-2 px-1", children: "Add Sub Location" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          type: "text",
-                          value: subLocInput,
-                          onChange: (e) => setSubLocInput(e.target.value),
-                          onKeyDown: (e) => {
-                            if (e.key === "Enter") {
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: onSummarize,
+          disabled: isSummarizing,
+          className: `group relative w-full py-4 px-6 rounded-[3rem] overflow-hidden bg-gradient-to-b from-white via-zinc-50 to-zinc-100 border border-white/70 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.9)] transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isSummarizing ? "opacity-70 cursor-wait" : "hover:shadow-[0_20px_50px_-15px_rgba(139,92,246,0.35)] hover:-translate-y-[2px] active:scale-[0.97]"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-700", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 bg-[conic-gradient(from_180deg_at_50%_50%,#8b5cf6,transparent_40%,#d946ef,transparent_70%)] blur-2xl opacity-30 animate-[spin_6s_linear_infinite]" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-500 bg-[radial-gradient(circle_at_50%_40%,rgba(139,92,246,0.18),transparent_70%)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-[1px] rounded-[inherit] bg-gradient-to-b from-white/90 to-transparent pointer-events-none" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-[100%] top-0 h-full w-[60%] bg-gradient-to-r from-transparent via-white/60 to-transparent skew-x-[-20deg] group-hover:left-[120%] transition-all duration-[1200ms]" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-[2px] rounded-[inherit] opacity-0 group-hover:opacity-100 bg-gradient-to-r from-violet-200/40 via-white/40 to-fuchsia-200/40 blur-md transition duration-500" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center gap-3", children: [
+              isSummarizing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 text-violet-500 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 text-violet-500 transition-all duration-500 group-hover:-rotate-12 group-hover:scale-125" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold tracking-[0.32em] uppercase text-zinc-800 group-hover:text-zinc-950 transition-all duration-300", children: isSummarizing ? "Summarizing..." : "Summarize Scene" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white/80 shadow-[0_4px_15px_rgb(0,0,0,0.04)] border border-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
+          "Tags",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto bg-slate-100/80 text-slate-500 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-widest border border-slate-200/50 shadow-inner", children: tags.length })
+        ] }),
+        tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
+          const catTags = Array.from(
+            new Map(
+              tags.filter((t) => t.category_id === cat.id).map((tag) => [tag.name.toLowerCase(), tag])
+            ).values()
+          );
+          if (catTags.length === 0) return null;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 border-b border-white/60 pb-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-2 h-2 rounded-full shadow-sm",
+                  style: { backgroundColor: cat.hex }
+                }
+              ),
+              cat.label
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              catTags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
+                  style: { color: cat.color },
+                  children: tag.name
+                },
+                index
+              )),
+              cat.id === "LOCATION" && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "relative flex items-center",
+                  ref: subLocPopoverRef,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setIsSubLocOpen(!isSubLocOpen),
+                        className: "flex items-center justify-center w-5 h-5 rounded-full hover:bg-slate-200 transition-colors",
+                        title: "Add Sub Location",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 text-slate-500" })
+                      }
+                    ),
+                    isSubLocOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-2 w-56 bg-white backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-3 z-50 animate-in fade-in zoom-in-95", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-2 px-1", children: "Add Sub Location" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "text",
+                            value: subLocInput,
+                            onChange: (e) => setSubLocInput(e.target.value),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") {
+                                addSubLocation(subLocInput);
+                                setSubLocInput("");
+                                setIsSubLocOpen(false);
+                              }
+                            },
+                            className: "w-full text-xs px-3 py-2 bg-white/50 border border-white/60 rounded-xl outline-none focus:bg-white/80 focus:border-white transition-all text-slate-700 font-bold shadow-[0_2px_10px_rgb(0,0,0,0.02)] placeholder:font-medium placeholder:text-slate-400",
+                            placeholder: "Sub location...",
+                            autoFocus: true
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => {
                               addSubLocation(subLocInput);
                               setSubLocInput("");
                               setIsSubLocOpen(false);
-                            }
-                          },
-                          className: "w-full text-xs px-3 py-2 bg-white/50 border border-white/60 rounded-xl outline-none focus:bg-white/80 focus:border-white transition-all text-slate-700 font-bold shadow-[0_2px_10px_rgb(0,0,0,0.02)] placeholder:font-medium placeholder:text-slate-400",
-                          placeholder: "Sub location...",
-                          autoFocus: true
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          onClick: () => {
-                            addSubLocation(subLocInput);
-                            setSubLocInput("");
-                            setIsSubLocOpen(false);
-                          },
-                          className: "flex items-center justify-center shrink-0 bg-slate-800 text-white px-3.5 py-2 rounded-xl text-[11px] font-bold hover:bg-slate-700 hover:shadow-md transition-all active:scale-95",
-                          children: "Add"
-                        }
-                      )
+                            },
+                            className: "flex items-center justify-center shrink-0 bg-slate-800 text-white px-3.5 py-2 rounded-xl text-[11px] font-bold hover:bg-slate-700 hover:shadow-md transition-all active:scale-95",
+                            children: "Add"
+                          }
+                        )
+                      ] })
                     ] })
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            catTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
-                style: { color: cat.color },
-                children: tag.text
-              },
-              tag.id
-            )),
-            cat.id === "LOCATION" && subLocations.map((subLoc) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: "group flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white backdrop-blur-md border border-slate-200/50 shadow-[0_4px_15px_rgb(0,0,0,0.03)] transition-all duration-300 cursor-default text-slate-500",
-                children: [
-                  subLoc,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => removeSubLocation(subLoc),
-                      className: "w-3.5 h-3.5 rounded-full hover:bg-slate-300/50 flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-2.5 h-2.5" })
-                    }
-                  )
-                ]
-              },
-              `sub-${subLoc}`
-            ))
-          ] })
-        ] }, cat.id);
-      }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-slate-400 italic bg-white/40 p-6 rounded-[2rem] border border-white border-dashed text-center shadow-[0_4px_20px_rgb(0,0,0,0.02)]", children: "Highlight text to tag elements." })
-    ] }) })
+                  ]
+                }
+              ),
+              cat.id === "LOCATION" && subLocations.map((subLoc) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "group flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white backdrop-blur-md border border-slate-200/50 shadow-[0_4px_15px_rgb(0,0,0,0.03)] transition-all duration-300 cursor-default text-slate-500",
+                  children: [
+                    subLoc,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => removeSubLocation(subLoc),
+                        className: "w-3.5 h-3.5 rounded-full hover:bg-slate-300/50 flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-2.5 h-2.5" })
+                      }
+                    )
+                  ]
+                },
+                `sub-${subLoc}`
+              ))
+            ] })
+          ] }, cat.id);
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-slate-400 italic bg-white/40 p-6 rounded-[2rem] border border-white border-dashed text-center shadow-[0_4px_20px_rgb(0,0,0,0.02)]", children: "Highlight text to tag elements." })
+      ] })
+    ] })
   ] }) });
 }
 function useScriptBreakdown({
@@ -2170,6 +2217,14 @@ var use_script_breakdown_default = useScriptBreakdown;
 // app/hook/use-script-breakdown-scene.ts
 function useScriptBreakdownScene(sceneNumber) {
   const { scenes, isLoading, error } = use_script_breakdown_default({ scenes: [] });
+  const [tags, setTags] = react.useState([]);
+  const [selectionMenu, setSelectionMenu] = react.useState(null);
+  const autoTaggedSceneRef = react.useRef(null);
+  const [menuPlacement, setMenuPlacement] = react.useState("top");
+  const [subLocations, setSubLocations] = react.useState([]);
+  const [sceneBrief, setSceneBrief] = react.useState("");
+  const [isSummarizing, setIsSummarizing] = react.useState(false);
+  const menuRef = react.useRef(null);
   const scene = react.useMemo(() => {
     return scenes.find((s) => s.scene_number === sceneNumber);
   }, [scenes, sceneNumber]);
@@ -2198,7 +2253,9 @@ function useScriptBreakdownScene(sceneNumber) {
           break;
         }
       }
-      parsedBlocks.push({ id: uuid(), type, text: divText });
+      const idAttr = div.getAttribute("id");
+      const blockId = idAttr && idAttr.startsWith("par") ? idAttr.substring(3) : idAttr || uuid();
+      parsedBlocks.push({ id: blockId, type, text: divText });
     });
     return parsedBlocks;
   }, [scene]);
@@ -2210,12 +2267,57 @@ function useScriptBreakdownScene(sceneNumber) {
     }).filter(Boolean);
     return [...new Set(chars)];
   }, [blocks]);
-  const [tags, setTags] = react.useState([]);
-  const [selectionMenu, setSelectionMenu] = react.useState(null);
-  const autoTaggedSceneRef = react.useRef(null);
-  const [menuPlacement, setMenuPlacement] = react.useState("top");
-  const menuRef = react.useRef(null);
-  const [subLocations, setSubLocations] = react.useState([]);
+  const handleAISummarize = async () => {
+    setIsSummarizing(true);
+    const res = await fetch(
+      "https://nonfibrous-extrafloral-verlene.ngrok-free.dev/extract",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "ngrok-skip-browser-warning": "true"
+        },
+        body: JSON.stringify({
+          script: (scene == null ? void 0 : scene.content) || ""
+        })
+      }
+    );
+    if (res.ok) {
+      const data = await res.json();
+      setIsSummarizing(false);
+      const parsedData = JSON.parse(data.data) || [];
+      console.log("AI Tags:", parsedData);
+      const newTags = [];
+      parsedData.forEach((aiTag) => {
+        if (!aiTag.block_id || !aiTag.category_id || typeof aiTag.start_index !== "number" || typeof aiTag.end_index !== "number") {
+          return;
+        }
+        newTags.push({
+          block_id: String(aiTag.block_id).startsWith("par") ? String(aiTag.block_id).substring(3) : String(aiTag.block_id),
+          category_id: aiTag.category_id,
+          name: aiTag.name,
+          start_index: aiTag.start_index,
+          end_index: aiTag.end_index
+        });
+      });
+      setTags((prev) => {
+        const merged = [...prev];
+        newTags.forEach((newTag) => {
+          const isOverlapping = merged.some(
+            (t) => t.block_id === newTag.block_id && newTag.end_index > t.start_index && newTag.start_index < t.end_index
+          );
+          if (!isOverlapping) {
+            merged.push(newTag);
+          }
+        });
+        return merged;
+      });
+      return data;
+    } else {
+      setIsSummarizing(false);
+      console.error("Failed to summarize scene:", res);
+    }
+  };
   const addSubLocation = react.useCallback(
     (subLocation) => {
       const trimmed = subLocation.trim();
@@ -2228,7 +2330,6 @@ function useScriptBreakdownScene(sceneNumber) {
   const removeSubLocation = react.useCallback((subLocation) => {
     setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
   }, []);
-  const [sceneBrief, setSceneBrief] = react.useState("");
   react.useEffect(() => {
     setTags([]);
     setSubLocations([]);
@@ -2247,19 +2348,19 @@ function useScriptBreakdownScene(sceneNumber) {
           let match;
           while ((match = regex.exec(block.text)) !== null) {
             const isOverlapping = autoTags.some(
-              (t) => t.blockId === block.id && match.index + char.length > t.startIndex && match.index < t.endIndex
+              (t) => t.block_id === block.id && match.index + char.length > t.start_index && match.index < t.end_index
             );
             if (!isOverlapping) {
               autoTags.push({
                 id: uuid(),
-                blockId: block.id,
-                categoryId: "CAST",
-                text: block.text.substring(
+                block_id: block.id,
+                category_id: "CAST",
+                name: block.text.substring(
                   match.index,
                   match.index + char.length
                 ),
-                startIndex: match.index,
-                endIndex: match.index + char.length
+                start_index: match.index,
+                end_index: match.index + char.length
               });
             }
           }
@@ -2359,15 +2460,15 @@ function useScriptBreakdownScene(sceneNumber) {
     if (!selectionMenu) return;
     const newTag = {
       id: uuid(),
-      blockId: selectionMenu.blockId,
-      categoryId,
-      text: selectionMenu.text,
-      startIndex: selectionMenu.startIndex,
-      endIndex: selectionMenu.endIndex
+      block_id: selectionMenu.blockId,
+      category_id: categoryId,
+      name: selectionMenu.text,
+      start_index: selectionMenu.startIndex,
+      end_index: selectionMenu.endIndex
     };
     setTags((prev) => {
       const filtered = prev.filter(
-        (t) => t.blockId !== newTag.blockId || !(newTag.endIndex > t.startIndex && newTag.startIndex < t.endIndex)
+        (t) => t.block_id !== newTag.block_id || !(newTag.end_index > t.start_index && newTag.start_index < t.end_index)
       );
       return [...filtered, newTag];
     });
@@ -2397,7 +2498,9 @@ function useScriptBreakdownScene(sceneNumber) {
     addSubLocation,
     removeSubLocation,
     sceneBrief,
-    setSceneBrief
+    setSceneBrief,
+    handleAISummarize,
+    isSummarizing
   };
 }