@vishu1301/script-writing 1.5.7 → 1.5.9

package/dist/index.js

@@ -1,11 +1,11 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React4, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { Users, Box, Shirt, Car, Armchair, UserPlus, MapPin, Map as Map$1, CornerDownRight, MessageSquareText, Parentheses, User, AlignLeft, Type, Loader2, Upload, Lock, Unlock, Save, FileDown, RefreshCcw, Cog, Languages, Check, Keyboard, ArrowRight, ChevronRight, Sparkles, Tags, ChevronDown, X, Video, Settings2, Eye, Pencil, BookOpen, Search, Zap, Info, Frame, BookText, AsteriskIcon, Target, Activity, MonitorPlay, Crosshair, Clock, Camera, Aperture, SlidersHorizontal, Sun, Wand2, Volume2, Layers } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as pdfjs from 'pdfjs-dist';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas-pro';
-import * as Yup from 'yup';
 import { Formik, Form, ErrorMessage, Field, useFormikContext } from 'formik';
+import * as Yup from 'yup';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -3298,1274 +3298,1473 @@ var SummarizeButton = ({
   );
 };
 var summarize_button_default = SummarizeButton;
-function ScriptBreakdownSceneView({
-  blocks,
-  characters,
-  isLoading,
-  sceneNumber,
-  tags,
-  selectionMenu,
-  handleMouseUp,
-  addTag,
-  updateTag,
-  removeTag,
-  clearSelection,
-  menuPlacement,
-  menuRef,
-  sceneBrief,
-  setSceneBrief,
-  onSummarize,
-  isSummarizing,
-  aiSummarized = false,
-  onUpdateBrief
-}) {
-  const [expandedCategories, setExpandedCategories] = useState({});
-  const [editingTagData, setEditingTagData] = useState(null);
-  const [tagForm, setTagForm] = useState({ quantity: 1, look: "", age: "" });
-  const [popupPlacement, setPopupPlacement] = useState({
-    alignRight: false,
-    alignBottom: false
-  });
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
-  useEffect(() => {
-    const fontId = "google-font-courier-prime";
-    const styleId = "screenplay-editor-force-v4";
-    if (!document.getElementById(fontId)) {
-      const link = document.createElement("link");
-      link.id = fontId;
-      link.rel = "stylesheet";
-      link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
-      document.head.appendChild(link);
-    }
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement("style");
-      style.id = styleId;
-      style.textContent = `
-        /* We target by the data-attribute to ensure the highest specificity possible */
-        [data-screenplay-editor] *, 
-        [data-screenplay-editor] div, 
-        [data-screenplay-editor] span, 
-        [data-screenplay-editor] [contenteditable="true"] {
-          font-family: ${COURIER_STACK} !important;
-          -webkit-font-smoothing: antialiased;
-        }
-      `;
-      document.head.appendChild(style);
-    }
-  }, [COURIER_STACK]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
-    ] });
-  }
-  const hasLocationTag = tags.some((t) => t.category_id === "LOCATION");
-  const renderBlockText = (block) => {
-    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) => {
-      const actualStart = Math.max(tag.start_index, currentIndex);
-      if (actualStart > currentIndex) {
-        nodes.push(
-          /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex, actualStart) }, `text-${currentIndex}`)
-        );
+
+// data/crowd-data.ts
+var crowdAgeOption = [
+  { name: "Adult" },
+  { name: "Old" },
+  { name: "Teenage" },
+  { name: "Kid" }
+];
+var crowdTypeOption = [{ name: "Male" }, { name: "Female" }];
+var FormikSelect = ({
+  label,
+  name,
+  selectedOption,
+  optionData,
+  value,
+  disable,
+  divClasses,
+  valueProperty = "name",
+  labelProperty = "name",
+  label2propery,
+  brackets,
+  className,
+  enableRedAsterick = false,
+  disableOptionProperty = "disable",
+  disabledOptionText = "",
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
       }
-      const category = CATEGORIES.find((c) => c.id === tag.category_id);
-      if (actualStart < tag.end_index) {
-        nodes.push(
-          /* @__PURE__ */ jsx(
-            "span",
+    ),
+    /* @__PURE__ */ jsxs(
+      Field,
+      {
+        name,
+        as: "select",
+        value,
+        disabled: disable,
+        onChange,
+        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all`,
+        children: [
+          /* @__PURE__ */ jsx("option", { selected: true, value: "", disabled: true, className: "capitalize", children: selectedOption }),
+          optionData == null ? void 0 : optionData.map((option, index) => /* @__PURE__ */ jsxs(
+            "option",
             {
-              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)
+              value: option[valueProperty],
+              disabled: option[disableOptionProperty],
+              children: [
+                option[labelProperty],
+                label2propery ? brackets ? ` (${option[label2propery]})` : option[label2propery] : "",
+                " ",
+                option[disableOptionProperty] && `(${disabledOptionText})`
+              ]
             },
-            tag.id || `tag-${actualStart}-${tag.end_index}`
-          )
-        );
+            index
+          ))
+        ]
       }
-      currentIndex = Math.max(currentIndex, tag.end_index);
-    });
-    if (currentIndex < block.text.length) {
-      nodes.push(
-        /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
-      );
+    ),
+    /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var FormikInput = (_a) => {
+  var _b = _a, {
+    label,
+    name,
+    type,
+    placeholder,
+    className,
+    labelClassName,
+    readOnly,
+    divClasses,
+    length,
+    disable,
+    min = 0,
+    max,
+    convertToText = false,
+    enableRedAsterick = false,
+    case_sensitivity = "normal"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "name",
+    "type",
+    "placeholder",
+    "className",
+    "labelClassName",
+    "readOnly",
+    "divClasses",
+    "length",
+    "disable",
+    "min",
+    "max",
+    "convertToText",
+    "enableRedAsterick",
+    "case_sensitivity"
+  ]);
+  const { setFieldValue } = useFormikContext();
+  const handleCaseChange = (e) => {
+    let value = e.target.value;
+    if (type === "number" && min !== void 0) {
+      if (value !== "" && Number(value) < min) return;
     }
-    return nodes;
+    switch (case_sensitivity) {
+      case "lowercase":
+        value = value.toLowerCase();
+        break;
+      case "uppercase":
+        value = value.toUpperCase();
+        break;
+    }
+    setFieldValue(name, value);
   };
-  return /* @__PURE__ */ jsxs("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",
-          {
-            className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-auto shrink-0",
-            style: {
-              fontFamily: COURIER_STACK,
-              paddingLeft: "1.5in",
-              paddingRight: "1in",
-              paddingTop: "1in",
-              paddingBottom: "1in",
-              lineHeight: "1.2"
-            },
-            "data-screenplay-editor": "true",
-            onMouseUp: handleMouseUp,
-            children: blocks.map((block) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-block-id": block.id,
-                className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
-                style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
-                  minHeight: "2.5rem"
-                }),
-                children: [
-                  renderBlockText(block),
-                  (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      ref: menuRef,
-                      "data-screenplay-editor": "false",
-                      className: `tag-menu absolute z-50 bg-white/70 backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-2 flex flex-col w-56 animate-in fade-in zoom-in-95 duration-300 ease-out ${menuPlacement === "top" ? "origin-bottom" : "origin-top"}`,
-                      style: {
-                        top: selectionMenu.top,
-                        left: selectionMenu.left,
-                        transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
-                          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
-                          /* @__PURE__ */ jsxs(
-                            "p",
-                            {
-                              className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
-                              title: selectionMenu.text,
-                              children: [
-                                '"',
-                                selectionMenu.text,
-                                '"'
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
-                          CATEGORIES.filter(
-                            (cat) => !(cat.id === "LOCATION" && hasLocationTag) && !(cat.id === "SUBLOCATION" && !hasLocationTag)
-                          ).map((cat) => /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              onClick: () => {
-                                const existingTag = tags.find(
-                                  (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
-                                );
-                                if (existingTag && existingTag.id) {
-                                  updateTag == null ? void 0 : updateTag(existingTag.id, cat.id);
-                                } else {
-                                  addTag(cat.id);
-                                }
-                              },
-                              className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-white/80 hover:shadow-[0_2px_10px_rgb(0,0,0,0.02)] active:scale-[0.98]",
-                              style: { color: cat.color },
-                              children: [
-                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                                  /* @__PURE__ */ jsx(
-                                    cat.icon,
-                                    {
-                                      className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
-                                      style: { color: cat.color }
-                                    }
-                                  ),
-                                  cat.label
-                                ] }),
-                                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-slate-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Select" })
-                              ]
-                            },
-                            cat.id
-                          )),
-                          tags.some(
-                            (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
-                          ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              onClick: (e) => {
-                                const tagToRemove = tags.find(
-                                  (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
-                                );
-                                if (tagToRemove) {
-                                  removeTag(e, tagToRemove.id);
-                                  clearSelection();
-                                }
-                              },
-                              className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-rose-50 hover:text-rose-600 hover:shadow-[0_2px_10px_rgb(225,29,72,0.04)] active:scale-[0.98] text-slate-500 border border-transparent hover:border-rose-100",
-                              children: [
-                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                                  /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
-                                  "Remove Tag"
-                                ] }),
-                                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-rose-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Remove" })
-                              ]
-                            }
-                          ) })
-                        ] })
-                      ]
-                    }
-                  )
-                ]
-              },
-              block.id
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md flex flex-col w-[210mm] shrink-0 p-8 md:p-12 lg:p-16", children: [
-          /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-6 flex items-center gap-3 font-sans", children: [
-            /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-100/80 shadow-inner border border-slate-200/50", children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
-            "Scene Brief"
-          ] }),
-          /* @__PURE__ */ 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(
-        "button",
-        {
-          onClick: () => setIsSidebarOpen(true),
-          className: "fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#15607b] text-white shadow-[0_8px_30px_rgba(21,96,123,0.3)] transition-transform hover:scale-105 active:scale-95 xl:hidden",
-          children: [
-            /* @__PURE__ */ jsx(Tags, { className: "h-6 w-6" }),
-            tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] font-bold text-white shadow-sm border-2 border-white", children: tags.length })
-          ]
-        }
-      ),
-      isSidebarOpen && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
-          onClick: () => setIsSidebarOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `fixed xl:absolute top-0 right-0 z-50 h-full w-72 transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] xl:translate-x-0 ${isSidebarOpen ? "translate-x-0 shadow-[0_0_40px_rgba(0,0,0,0.1)]" : "translate-x-full"}`,
-          children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-[100dvh] max-h-screen w-full flex-col border-l border-l-[#eefafd] bg-white p-3 py-5", children: [
-            !aiSummarized && /* @__PURE__ */ jsx(
-              summarize_button_default,
-              {
-                isSummarizing,
-                onSummarize
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 border-t border-t-[#eefafd] flex-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between mb-6 shrink-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 items-center justify-center rounded-[10px] border border-[#15607b]/20 bg-white shadow-sm", children: /* @__PURE__ */ jsx(Tags, { className: "h-4 w-4 text-[#15607b]" }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-semibold uppercase tracking-[0.28em] text-[#134a61]", children: "Breakdown" })
-                ] }),
-                /* @__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 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];
-                const uniqueTags = Array.from(
-                  new Map(
-                    catTags.map((tag) => [tag.name.toLowerCase(), tag])
-                  ).values()
-                );
-                return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      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]",
-                      style: {
-                        background: `linear-gradient(135deg, rgba(255,255,255,0.92), ${cat.hex}18)`,
-                        boxShadow: `0 16px 36px ${cat.hex}14, inset 0 1px 0 rgba(255,255,255,0.9)`,
-                        border: `1px solid ${cat.hex}50`
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
-                            style: {
-                              background: `radial-gradient(circle at 15% 20%, ${cat.hex}24, transparent 38%)`
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/70 backdrop-blur-md",
-                            style: {
-                              background: `linear-gradient(135deg, ${cat.color}22, rgba(255,255,255,0.75))`,
-                              boxShadow: `0 10px 22px ${cat.color}14`
-                            },
-                            children: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4", color: cat.color })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: "relative text-[13px] font-semibold tracking-[0.01em]",
-                            style: { color: cat.color },
-                            children: cat.label
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { className: "relative ml-auto rounded-full border border-white/70 bg-white/75 px-2.5 py-1 text-[11px] font-semibold text-[#456575] backdrop-blur-md", children: catTags.length }),
-                        /* @__PURE__ */ jsx(
-                          ChevronDown,
-                          {
-                            className: `relative h-4 w-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "rotate-180" : ""}`,
-                            style: { color: cat.color }
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: `grid transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0"}`,
-                      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(
-                        "div",
-                        {
-                          className: "relative flex flex-col items-start",
-                          children: /* @__PURE__ */ jsxs(
-                            "span",
-                            {
-                              title: tag.name,
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST")
-                                  return;
-                                if ((editingTagData == null ? void 0 : editingTagData.tag.id) === tag.id) {
-                                  setEditingTagData(null);
-                                } else {
-                                  const rect = e.currentTarget.getBoundingClientRect();
-                                  setPopupPlacement({
-                                    alignRight: rect.left > window.innerWidth - 240,
-                                    alignBottom: rect.bottom > window.innerHeight - 250
-                                  });
-                                  setTagForm({
-                                    quantity: tag.quantity || 1,
-                                    look: tag.look || "",
-                                    age: tag.age || ""
-                                  });
-                                  setEditingTagData({
-                                    tag,
-                                    catId: cat.id,
-                                    catColor: cat.color,
-                                    rect
-                                  });
-                                }
-                              },
-                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
-                              style: {
-                                color: cat.color,
-                                background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
-                                borderColor: `${cat.color}28`
-                              },
-                              children: [
-                                tag.name,
-                                (cat.id === "PROP" || cat.id === "SET_PROP") && tag.quantity && tag.quantity > 1 ? /* @__PURE__ */ jsxs("span", { className: "ml-1.5 opacity-80 font-bold", children: [
-                                  "x",
-                                  tag.quantity
-                                ] }) : null
-                              ]
-                            }
-                          )
-                        },
-                        index
-                      )) }) })
-                    }
-                  )
-                ] }, cat.id);
-              }) })
-            ] })
-          ] })
-        }
-      )
-    ] }),
-    editingTagData && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `${labelClassName} mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Field,
+      __spreadProps(__spreadValues({
+        name,
+        placeholder,
+        readOnly,
+        type,
+        maxLength: length,
+        disabled: disable,
+        max,
+        min,
+        onChange: handleCaseChange
+      }, props), {
+        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
+      })
+    ),
+    /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var FormikTextarea = ({
+  label,
+  name,
+  placeholder,
+  readOnly,
+  divClasses = "",
+  className = "",
+  length,
+  disable,
+  min,
+  max,
+  enableRedAsterick = false
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        as: "textarea",
+        name,
+        placeholder,
+        readOnly,
+        maxLength: length,
+        disabled: disable,
+        max,
+        min,
+        className: `${className} block w-full px-4 py-3 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 rounded-2xl focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+var Switch = ({
+  isOn,
+  handleToggle,
+  activeColor = "bg-green-500",
+  inactiveColor = "bg-gray-300",
+  size = "medium",
+  onLabel,
+  offLabel,
+  label,
+  divClasses,
+  labelClasses,
+  disable = false
+}) => {
+  const sizeClasses = {
+    small: { width: 28, height: 18, handle: 12, labelSize: 12, gap: 4 },
+    medium: { width: 48, height: 28, handle: 20, labelSize: 16, gap: 6 },
+    large: { width: 64, height: 36, handle: 28, labelSize: 20, gap: 10 }
+  };
+  const selectedSize = sizeClasses[size] || sizeClasses.medium;
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `block mb-2 text-sm text-gray-600 ${disable && "text-gray-400!"} ${labelClasses}`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { gap: selectedSize.gap }, className: "flex items-center", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "fixed inset-0 z-[100]",
-          onClick: (e) => {
-            e.stopPropagation();
-            setEditingTagData(null);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `p-3.5 bg-white/90 backdrop-blur-2xl rounded-[1.25rem] shadow-[0_10px_40px_rgb(0,0,0,0.12)] border border-white/60 z-[101] w-56 animate-in fade-in zoom-in-95 duration-200 ease-out fixed`,
+          className: `flex items-center rounded-full cursor-pointer relative ${isOn ? activeColor : inactiveColor} ${disable && "opacity-50 cursor-not-allowed"}`,
+          onClick: disable ? () => {
+          } : handleToggle,
+          role: "button",
+          "aria-pressed": isOn,
           style: {
-            top: popupPlacement.alignBottom ? "auto" : editingTagData.rect.bottom + 8,
-            bottom: popupPlacement.alignBottom ? window.innerHeight - editingTagData.rect.top + 8 : "auto",
-            left: popupPlacement.alignRight ? "auto" : editingTagData.rect.left,
-            right: popupPlacement.alignRight ? window.innerWidth - editingTagData.rect.right : "auto"
+            width: selectedSize.width,
+            height: selectedSize.height
           },
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3 border-b border-slate-100 pb-2.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-extrabold text-slate-400 uppercase tracking-widest drop-shadow-sm", children: "Details" }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setEditingTagData(null),
-                  className: "hover:bg-slate-100/80 p-1.5 rounded-full transition-colors active:scale-95",
-                  children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5 text-slate-500" })
-                }
-              )
-            ] }),
-            (editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Quantity" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "number",
-                  min: "1",
-                  value: tagForm.quantity,
-                  onChange: (e) => {
-                    const val = Math.max(1, parseInt(e.target.value) || 1);
-                    setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
-                      quantity: val
-                    }));
-                  },
-                  className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
-                }
-              )
-            ] }),
-            editingTagData.catId === "CAST" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Look" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    placeholder: "e.g. Dirty, Formal",
-                    value: tagForm.look,
-                    onChange: (e) => {
-                      setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
-                        look: e.target.value
-                      }));
-                    },
-                    className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700 placeholder:text-slate-400 placeholder:font-normal"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Age" }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-white rounded-full shadow-sm ease-in duration-200",
+              style: {
+                width: selectedSize.handle,
+                height: selectedSize.handle,
+                transform: `translateX(${isOn ? selectedSize.width - selectedSize.handle - 3 : 3}px)`,
+                transition: "transform 0.2s ease-in-out"
+              }
+            }
+          )
+        }
+      ),
+      onLabel && offLabel && /* @__PURE__ */ jsx("span", { style: { fontSize: selectedSize.labelSize }, children: isOn ? onLabel : offLabel })
+    ] })
+  ] });
+};
+var MultiSelect = ({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "Select options...",
+  valueProperty = "name",
+  labelProperty = "name",
+  divClasses = "",
+  returnObjects = false
+}) => {
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const containerRef = React4.useRef(null);
+  const isSelected = (optionValue) => {
+    return value.some(
+      (v) => typeof v === "object" && v !== null ? v[valueProperty] === optionValue : v === optionValue
+    );
+  };
+  const toggleOption = (optionValue) => {
+    let newValues;
+    if (isSelected(optionValue)) {
+      newValues = value.filter(
+        (v) => typeof v === "object" && v !== null ? v[valueProperty] !== optionValue : v !== optionValue
+      );
+    } else {
+      const newValue = returnObjects ? options.find((opt) => opt[valueProperty] === optionValue) : optionValue;
+      newValues = [...value, newValue];
+    }
+    onChange(newValues);
+  };
+  const removeOption = (e, optionValue) => {
+    e.stopPropagation();
+    const newValues = value.filter(
+      (v) => typeof v === "object" && v !== null ? v[valueProperty] !== optionValue : v !== optionValue
+    );
+    onChange(newValues);
+  };
+  React4.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: `w-full relative ${divClasses}`, ref: containerRef, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "mb-1.5 text-xs font-bold text-slate-600 ml-1 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: `min-h-[40px] w-full px-3 py-1.5 bg-slate-50/50 border border-slate-200/80 rounded-xl transition-all cursor-pointer flex flex-wrap gap-1.5 items-center ${isOpen ? "border-blumine-500 bg-white shadow-sm ring-2 ring-blumine-500/10" : "hover:border-slate-300"}`,
+        children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-slate-400 text-[13px] ml-1", children: placeholder }) : value.map((val) => {
+          const actualValue = typeof val === "object" && val !== null ? val[valueProperty] : val;
+          const option = options.find(
+            (opt) => opt[valueProperty] === actualValue
+          );
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1 bg-white text-slate-700 px-2 py-0.5 rounded-lg border border-slate-200 text-[11px] font-bold shadow-sm animate-in zoom-in-95 duration-150",
+              children: [
+                option ? option[labelProperty] : actualValue,
                 /* @__PURE__ */ jsx(
-                  "input",
+                  "button",
                   {
-                    type: "number",
-                    min: "0",
-                    max: "100",
-                    value: tagForm.age,
-                    onChange: (e) => {
-                      let val = parseInt(e.target.value);
-                      if (isNaN(val)) {
-                        setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
-                          age: ""
-                        }));
-                        return;
-                      }
-                      val = Math.max(0, Math.min(100, val));
-                      setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
-                        age: val.toString()
-                      }));
-                    },
-                    className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
+                    type: "button",
+                    onClick: (e) => removeOption(e, actualValue),
+                    className: "hover:text-red-500 transition-colors ml-0.5",
+                    children: "\xD7"
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  if (editingTagData.tag.id) {
-                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, editingTagData.catId, __spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}));
-                  }
-                  setEditingTagData(null);
-                },
-                className: "w-full bg-[#15607b] hover:bg-[#134a61] text-white text-[12px] font-bold py-2.5 rounded-xl transition-all shadow-[0_4px_12px_rgba(21,96,123,0.2)] hover:shadow-[0_6px_16px_rgba(21,96,123,0.3)] active:scale-[0.98]",
-                children: "Update Details"
-              }
-            ) })
-          ]
-        }
-      )
-    ] })
+              ]
+            },
+            actualValue
+          );
+        })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute z-[110] w-full mt-1.5 bg-white border border-slate-200 rounded-xl shadow-xl max-h-48 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-200 custom-scrollbar", children: /* @__PURE__ */ jsx("div", { className: "p-1", children: options.filter((opt) => !isSelected(opt[valueProperty])).length > 0 ? options.filter((opt) => !isSelected(opt[valueProperty])).map((option, index) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: () => toggleOption(option[valueProperty]),
+          className: "px-3 py-2 text-[12px] rounded-lg cursor-pointer transition-colors flex items-center justify-between text-slate-600 hover:bg-slate-50",
+          children: option[labelProperty]
+        },
+        index
+      );
+    }) : /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-[10px] text-slate-400 text-center font-bold uppercase tracking-wider", children: "All selected" }) }) })
   ] });
-}
-function useScriptBreakdownScene(options) {
-  const [tags, setTags] = useState(options.preLoadedTags || []);
-  const [selectionMenu, setSelectionMenu] = useState(null);
-  const autoTaggedSceneRef = useRef(null);
-  const [scene, setScene] = useState(null);
-  const [menuPlacement, setMenuPlacement] = useState("top");
-  const [sceneBrief, setSceneBrief] = useState("");
-  const [isSummarizing, setIsSummarizing] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const menuRef = useRef(null);
+};
+function ScriptBreakdownSceneView({
+  blocks,
+  characters,
+  isLoading,
+  sceneNumber,
+  tags,
+  selectionMenu,
+  handleMouseUp,
+  addTag,
+  updateTag,
+  removeTag,
+  clearSelection,
+  menuPlacement,
+  menuRef,
+  sceneBrief,
+  setSceneBrief,
+  onSummarize,
+  isSummarizing,
+  aiSummarized = false,
+  onUpdateBrief
+}) {
+  const [expandedCategories, setExpandedCategories] = useState({});
+  const [editingTagData, setEditingTagData] = useState(null);
+  const [tagForm, setTagForm] = useState({ quantity: 1, look: "", age: "", age_range: [], crowd_type: [] });
+  const [popupPlacement, setPopupPlacement] = useState({
+    alignRight: false,
+    alignBottom: false
+  });
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
   useEffect(() => {
-    setIsLoading(true);
-    const fetchScene = async () => {
-      try {
-        const response = await fetch(options.scene_url, options.fetchOptions);
-        if (response.ok) {
-          const text = await response.text();
-          setScene({ content: text });
-        } else {
-          console.error("Failed to fetch scene:", response);
-          setError(true);
+    const fontId = "google-font-courier-prime";
+    const styleId = "screenplay-editor-force-v4";
+    if (!document.getElementById(fontId)) {
+      const link = document.createElement("link");
+      link.id = fontId;
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
+      document.head.appendChild(link);
+    }
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        /* We target by the data-attribute to ensure the highest specificity possible */
+        [data-screenplay-editor] *, 
+        [data-screenplay-editor] div, 
+        [data-screenplay-editor] span, 
+        [data-screenplay-editor] [contenteditable="true"] {
+          font-family: ${COURIER_STACK} !important;
+          -webkit-font-smoothing: antialiased;
         }
-        setIsLoading(false);
-      } catch (error2) {
-        setError(true);
-        setIsLoading(false);
-        console.error("Error fetching scene:", error2);
+      `;
+      document.head.appendChild(style);
+    }
+  }, [COURIER_STACK]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
+    ] });
+  }
+  const hasLocationTag = tags.some((t) => t.category_id === "LOCATION");
+  const renderBlockText = (block) => {
+    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) => {
+      const actualStart = Math.max(tag.start_index, currentIndex);
+      if (actualStart > currentIndex) {
+        nodes.push(
+          /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex, actualStart) }, `text-${currentIndex}`)
+        );
       }
-    };
-    fetchScene();
-  }, []);
-  const blocks = useMemo(() => {
-    if (!scene || !scene.content) return [];
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(scene.content, "text/html");
-    const divs = Array.from(doc.querySelectorAll("div"));
-    const parsedBlocks = [];
-    const typeMap = {
-      divtype0: "SCENE_HEADING",
-      divtype2: "ACTION",
-      divtype3: "CHARACTER",
-      divtype4: "PARENTHETICAL",
-      divtype5: "DIALOGUE",
-      divtype6: "TRANSITION"
-    };
-    divs.forEach((div) => {
-      var _a;
-      const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
-      if (!divText) return;
-      let type = "ACTION";
-      for (const className of Array.from(div.classList)) {
-        if (typeMap[className]) {
-          type = typeMap[className];
-          break;
-        }
+      const category = CATEGORIES.find((c) => c.id === tag.category_id);
+      if (actualStart < tag.end_index) {
+        nodes.push(
+          /* @__PURE__ */ 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)
+            },
+            tag.id || `tag-${actualStart}-${tag.end_index}`
+          )
+        );
       }
-      const idAttr = div.getAttribute("id");
-      const blockId = idAttr && idAttr.startsWith("par") ? idAttr.substring(3) : idAttr || uuid();
-      parsedBlocks.push({ id: blockId, type, text: divText });
+      currentIndex = Math.max(currentIndex, tag.end_index);
     });
-    return parsedBlocks;
-  }, [scene]);
-  const characters = useMemo(() => {
-    const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
-      const text = b.text.trim().toUpperCase();
-      const parenIndex = text.indexOf("(");
-      return parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
-    }).filter(Boolean);
-    return [...new Set(chars)];
-  }, [blocks]);
-  const handleAISummarize = async () => {
-    var _a;
-    setIsSummarizing(true);
-    const res = await ((_a = options.onAISummarize) == null ? void 0 : _a.call(options, scene.content));
-    if (res.ok) {
-      const data = await res.json();
-      setIsSummarizing(false);
-      let parsedData = [];
-      let parsedSummaryData = {};
-      try {
-        const normalData = JSON.parse(data.data);
-        if (Array.isArray(normalData)) {
-          parsedData = Array.isArray(normalData[0]) ? normalData[0] : [];
-          const summary = Array.isArray(normalData[1]) ? normalData[1] : [];
-          parsedSummaryData = summary[0] || {};
-        }
-      } catch (error2) {
-        console.error("Error parsing AI summary data:", error2);
-      }
-      setSceneBrief(parsedSummaryData.summarise || "");
-      const newTags = [];
-      parsedData.forEach((aiTag) => {
-        if (!aiTag.block_id || !aiTag.category_id || typeof aiTag.start_index !== "number" || typeof aiTag.end_index !== "number") {
-          return;
-        }
-        const newTag = {
-          id: aiTag.id || uuid(),
-          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
-        };
-        if (aiTag.category_id === "PROP" || aiTag.category_id === "SET_PROP") {
-          newTag.quantity = 1;
-        } else if (aiTag.category_id === "CAST") {
-          newTag.look = "";
-          newTag.age = "";
-        }
-        newTags.push(newTag);
-      });
-      if (newTags.length > 0) {
-        const originalTags = tags;
-        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;
-        });
-        try {
-          if (options.onTagsBulkAdded) {
-            await options.onTagsBulkAdded(newTags, parsedSummaryData.summarise);
-          }
-        } catch (error2) {
-          console.error("Failed to bulk add AI-generated tags:", error2);
-          setTags(originalTags);
-        }
-      }
-      return data;
-    } else {
-      setIsSummarizing(false);
-      console.error("Failed to summarize scene:", res);
+    if (currentIndex < block.text.length) {
+      nodes.push(
+        /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
+      );
     }
+    return nodes;
   };
-  const bulkCreateTags = useCallback(async () => {
-    if (blocks.length === 0) return;
-    const newTags = [];
-    const seenCharacters = /* @__PURE__ */ new Set();
-    const timeOfDays = ["DAY", "NIGHT"];
-    const isTimeOfDay = (str) => timeOfDays.includes(str.toUpperCase());
-    blocks.forEach((block) => {
-      if (block.type === "CHARACTER") {
-        const text = block.text.trim();
-        const parenIndex = text.indexOf("(");
-        const charName = parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
-        if (charName && !seenCharacters.has(charName.toUpperCase())) {
-          seenCharacters.add(charName.toUpperCase());
-          const startIndex = text.indexOf(charName);
-          if (startIndex !== -1) {
-            newTags.push({
-              id: uuid(),
-              block_id: block.id,
-              category_id: "CAST",
-              name: charName,
-              start_index: startIndex,
-              end_index: startIndex + charName.length,
-              look: "",
-              age: ""
-            });
+  return /* @__PURE__ */ jsxs("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",
+          {
+            className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-auto shrink-0",
+            style: {
+              fontFamily: COURIER_STACK,
+              paddingLeft: "1.5in",
+              paddingRight: "1in",
+              paddingTop: "1in",
+              paddingBottom: "1in",
+              lineHeight: "1.2"
+            },
+            "data-screenplay-editor": "true",
+            onMouseUp: handleMouseUp,
+            children: blocks.map((block) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-block-id": block.id,
+                className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
+                style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
+                  minHeight: "2.5rem"
+                }),
+                children: [
+                  renderBlockText(block),
+                  (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ref: menuRef,
+                      "data-screenplay-editor": "false",
+                      className: `tag-menu absolute z-50 bg-white/70 backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-2 flex flex-col w-56 animate-in fade-in zoom-in-95 duration-300 ease-out ${menuPlacement === "top" ? "origin-bottom" : "origin-top"}`,
+                      style: {
+                        top: selectionMenu.top,
+                        left: selectionMenu.left,
+                        transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
+                          /* @__PURE__ */ jsxs(
+                            "p",
+                            {
+                              className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
+                              title: selectionMenu.text,
+                              children: [
+                                '"',
+                                selectionMenu.text,
+                                '"'
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
+                          CATEGORIES.filter(
+                            (cat) => !(cat.id === "LOCATION" && hasLocationTag) && !(cat.id === "SUBLOCATION" && !hasLocationTag)
+                          ).map((cat) => /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              onClick: () => {
+                                const existingTag = tags.find(
+                                  (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
+                                );
+                                if (existingTag && existingTag.id) {
+                                  updateTag == null ? void 0 : updateTag(existingTag.id, cat.id);
+                                } else {
+                                  addTag(cat.id);
+                                }
+                              },
+                              className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-white/80 hover:shadow-[0_2px_10px_rgb(0,0,0,0.02)] active:scale-[0.98]",
+                              style: { color: cat.color },
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                                  /* @__PURE__ */ jsx(
+                                    cat.icon,
+                                    {
+                                      className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
+                                      style: { color: cat.color }
+                                    }
+                                  ),
+                                  cat.label
+                                ] }),
+                                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-slate-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Select" })
+                              ]
+                            },
+                            cat.id
+                          )),
+                          tags.some(
+                            (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
+                          ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              onClick: (e) => {
+                                const tagToRemove = tags.find(
+                                  (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
+                                );
+                                if (tagToRemove) {
+                                  removeTag(e, tagToRemove.id);
+                                  clearSelection();
+                                }
+                              },
+                              className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-rose-50 hover:text-rose-600 hover:shadow-[0_2px_10px_rgb(225,29,72,0.04)] active:scale-[0.98] text-slate-500 border border-transparent hover:border-rose-100",
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                                  /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
+                                  "Remove Tag"
+                                ] }),
+                                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-rose-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Remove" })
+                              ]
+                            }
+                          ) })
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              },
+              block.id
+            ))
           }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md flex flex-col w-[210mm] shrink-0 p-8 md:p-12 lg:p-16", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-6 flex items-center gap-3 font-sans", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-100/80 shadow-inner border border-slate-200/50", children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
+            "Scene Brief"
+          ] }),
+          /* @__PURE__ */ 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(
+        "button",
+        {
+          onClick: () => setIsSidebarOpen(true),
+          className: "fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#15607b] text-white shadow-[0_8px_30px_rgba(21,96,123,0.3)] transition-transform hover:scale-105 active:scale-95 xl:hidden",
+          children: [
+            /* @__PURE__ */ jsx(Tags, { className: "h-6 w-6" }),
+            tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] font-bold text-white shadow-sm border-2 border-white", children: tags.length })
+          ]
         }
-      } else if (block.type === "SCENE_HEADING") {
-        const text = block.text.trim();
-        const typeMatch = text.match(
-          /^(INT\/EXT|INT\.?\/EXT\.?|INT\.EXT\.?|INT|EXT|I\/E)\.?\s+/i
-        );
-        let remainingText = text;
-        let offset = 0;
-        if (typeMatch) {
-          offset = typeMatch[0].length;
-          remainingText = text.substring(offset);
+      ),
+      isSidebarOpen && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
+          onClick: () => setIsSidebarOpen(false)
         }
-        const parts = remainingText.split(/\s+-\s+/);
-        if (parts.length > 0) {
-          const locationName = parts[0].trim();
-          const locStart = text.indexOf(locationName, offset);
-          if (locStart !== -1 && locationName) {
-            newTags.push({
-              id: uuid(),
-              block_id: block.id,
-              category_id: "LOCATION",
-              name: locationName,
-              start_index: locStart,
-              end_index: locStart + locationName.length
-            });
-          }
-          if (parts.length > 1) {
-            const secondPart = parts[1].trim();
-            const isLast = parts.length === 2;
-            if (!isLast || !isTimeOfDay(secondPart)) {
-              const subLocStart = text.indexOf(
-                secondPart,
-                locStart + locationName.length
-              );
-              if (subLocStart !== -1 && secondPart) {
-                newTags.push({
-                  id: uuid(),
-                  block_id: block.id,
-                  category_id: "SUBLOCATION",
-                  name: secondPart,
-                  start_index: subLocStart,
-                  end_index: subLocStart + secondPart.length
-                });
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `fixed xl:absolute top-0 right-0 z-50 h-full w-72 transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] xl:translate-x-0 ${isSidebarOpen ? "translate-x-0 shadow-[0_0_40px_rgba(0,0,0,0.1)]" : "translate-x-full"}`,
+          children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-[100dvh] max-h-screen w-full flex-col border-l border-l-[#eefafd] bg-white p-3 py-5", children: [
+            !aiSummarized && /* @__PURE__ */ jsx(
+              summarize_button_default,
+              {
+                isSummarizing,
+                onSummarize
               }
-            }
-          }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 border-t border-t-[#eefafd] flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between mb-6 shrink-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 items-center justify-center rounded-[10px] border border-[#15607b]/20 bg-white shadow-sm", children: /* @__PURE__ */ jsx(Tags, { className: "h-4 w-4 text-[#15607b]" }) }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-semibold uppercase tracking-[0.28em] text-[#134a61]", children: "Breakdown" })
+                ] }),
+                /* @__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 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];
+                const uniqueTags = Array.from(
+                  new Map(
+                    catTags.map((tag) => [tag.name.toLowerCase(), tag])
+                  ).values()
+                );
+                return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      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]",
+                      style: {
+                        background: `linear-gradient(135deg, rgba(255,255,255,0.92), ${cat.hex}18)`,
+                        boxShadow: `0 16px 36px ${cat.hex}14, inset 0 1px 0 rgba(255,255,255,0.9)`,
+                        border: `1px solid ${cat.hex}50`
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+                            style: {
+                              background: `radial-gradient(circle at 15% 20%, ${cat.hex}24, transparent 38%)`
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/70 backdrop-blur-md",
+                            style: {
+                              background: `linear-gradient(135deg, ${cat.color}22, rgba(255,255,255,0.75))`,
+                              boxShadow: `0 10px 22px ${cat.color}14`
+                            },
+                            children: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4", color: cat.color })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "relative text-[13px] font-semibold tracking-[0.01em]",
+                            style: { color: cat.color },
+                            children: cat.label
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "relative ml-auto rounded-full border border-white/70 bg-white/75 px-2.5 py-1 text-[11px] font-semibold text-[#456575] backdrop-blur-md", children: catTags.length }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            className: `relative h-4 w-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "rotate-180" : ""}`,
+                            style: { color: cat.color }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `grid transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0"}`,
+                      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(
+                        "div",
+                        {
+                          className: "relative flex flex-col items-start",
+                          children: /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              title: tag.name,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST" && cat.id !== "EXTRA")
+                                  return;
+                                if ((editingTagData == null ? void 0 : editingTagData.tag.id) === tag.id) {
+                                  setEditingTagData(null);
+                                } else {
+                                  const rect = e.currentTarget.getBoundingClientRect();
+                                  setPopupPlacement({
+                                    alignRight: rect.left > window.innerWidth - 240,
+                                    alignBottom: rect.bottom > window.innerHeight - 250
+                                  });
+                                  setTagForm({
+                                    quantity: tag.quantity || 1,
+                                    look: tag.look || "",
+                                    age: tag.age || "",
+                                    age_range: tag.age_range || [],
+                                    crowd_type: tag.crowd_type || []
+                                  });
+                                  setEditingTagData({
+                                    tag,
+                                    catId: cat.id,
+                                    catColor: cat.color,
+                                    rect
+                                  });
+                                }
+                              },
+                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 cursor-pointer! ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
+                              style: {
+                                color: cat.color,
+                                background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
+                                borderColor: `${cat.color}28`
+                              },
+                              children: [
+                                tag.name,
+                                (cat.id === "PROP" || cat.id === "SET_PROP") && tag.quantity && tag.quantity > 1 ? /* @__PURE__ */ jsxs("span", { className: "ml-1.5 opacity-80 font-bold", children: [
+                                  "x",
+                                  tag.quantity
+                                ] }) : null
+                              ]
+                            }
+                          )
+                        },
+                        index
+                      )) }) })
+                    }
+                  )
+                ] }, cat.id);
+              }) })
+            ] })
+          ] })
         }
-      }
-    });
-    if (newTags.length > 0) {
-      const originalTags = tags;
-      setTags((prev) => {
-        const merged = [...prev];
-        const existingChars = new Set(
-          merged.filter(
-            (t) => t.category_id === "CHARACTER" || t.category_id === "CAST"
-          ).map((t) => t.name.toUpperCase())
-        );
-        newTags.forEach((newTag) => {
-          if (newTag.category_id === "CHARACTER") {
-            if (existingChars.has(newTag.name.toUpperCase())) return;
-            existingChars.add(newTag.name.toUpperCase());
-          }
-          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);
+      )
+    ] }),
+    editingTagData && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[100]",
+          onClick: (e) => {
+            e.stopPropagation();
+            setEditingTagData(null);
           }
-        });
-        return merged;
-      });
-      try {
-        if (options.onTagsBulkAdded) {
-          await options.onTagsBulkAdded(newTags);
         }
-      } catch (error2) {
-        console.error("Failed to bulk create tags:", error2);
-        setTags(originalTags);
-      }
-    }
-  }, [blocks, tags, options.onTagsBulkAdded]);
-  useEffect(() => {
-    setSceneBrief("");
-    autoTaggedSceneRef.current = null;
-  }, [options.scene_url]);
-  useEffect(() => {
-    if (options.preLoadedTags && options.preLoadedTags.length > 0) {
-      setTags((prev) => {
-        if (JSON.stringify(prev) === JSON.stringify(options.preLoadedTags)) {
-          return prev;
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `p-3.5 bg-white/90 backdrop-blur-2xl rounded-[1.25rem] shadow-[0_10px_40px_rgb(0,0,0,0.12)] border border-white/60 z-[101] w-56 animate-in fade-in zoom-in-95 duration-200 ease-out fixed`,
+          style: {
+            top: popupPlacement.alignBottom ? "auto" : editingTagData.rect.bottom + 8,
+            bottom: popupPlacement.alignBottom ? window.innerHeight - editingTagData.rect.top + 8 : "auto",
+            left: popupPlacement.alignRight ? "auto" : editingTagData.rect.left,
+            right: popupPlacement.alignRight ? window.innerWidth - editingTagData.rect.right : "auto"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3 border-b border-slate-100 pb-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-extrabold text-slate-400 uppercase tracking-widest drop-shadow-sm", children: "Details" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setEditingTagData(null),
+                  className: "hover:bg-slate-100/80 p-1.5 rounded-full transition-colors active:scale-95",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5 text-slate-500" })
+                }
+              )
+            ] }),
+            (editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Quantity" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  min: "1",
+                  value: tagForm.quantity,
+                  onChange: (e) => {
+                    const val = Math.max(1, parseInt(e.target.value) || 1);
+                    setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
+                      quantity: val
+                    }));
+                  },
+                  className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
+                }
+              )
+            ] }),
+            editingTagData.catId === "CAST" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Look" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "e.g. Dirty, Formal",
+                    value: tagForm.look,
+                    onChange: (e) => {
+                      setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
+                        look: e.target.value
+                      }));
+                    },
+                    className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700 placeholder:text-slate-400 placeholder:font-normal"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Age" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    min: "0",
+                    max: "100",
+                    value: tagForm.age,
+                    onChange: (e) => {
+                      let val = parseInt(e.target.value);
+                      if (isNaN(val)) {
+                        setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
+                          age: ""
+                        }));
+                        return;
+                      }
+                      val = Math.max(0, Math.min(100, val));
+                      setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
+                        age: val.toString()
+                      }));
+                    },
+                    className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
+                  }
+                )
+              ] })
+            ] }),
+            editingTagData.catId === "EXTRA" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx(
+                MultiSelect,
+                {
+                  label: "Age Range",
+                  options: crowdAgeOption,
+                  value: tagForm.age_range,
+                  returnObjects: true,
+                  onChange: (val) => setTagForm((prev) => __spreadProps(__spreadValues({}, prev), { age_range: val }))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultiSelect,
+                {
+                  label: "Crowd Type",
+                  options: crowdTypeOption,
+                  value: tagForm.crowd_type,
+                  returnObjects: true,
+                  onChange: (val) => setTagForm((prev) => __spreadProps(__spreadValues({}, prev), { crowd_type: val }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (editingTagData.tag.id) {
+                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, editingTagData.catId, __spreadValues(__spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}), editingTagData.catId === "EXTRA" ? {
+                      age_range: tagForm.age_range,
+                      crowd_type: tagForm.crowd_type
+                    } : {}));
+                  }
+                  setEditingTagData(null);
+                },
+                className: "w-full bg-[#15607b] hover:bg-[#134a61] text-white text-[12px] font-bold py-2.5 rounded-xl transition-all shadow-[0_4px_12px_rgba(21,96,123,0.2)] hover:shadow-[0_6px_16px_rgba(21,96,123,0.3)] active:scale-[0.98]",
+                children: "Update Details"
+              }
+            ) })
+          ]
         }
-        return options.preLoadedTags || [];
-      });
-    }
-  }, [options.preLoadedTags]);
-  useEffect(() => {
-    const doBulkCreate = async () => {
-      if (blocks.length === 0) return;
-      if (options.preLoadedTagsLoading) return;
-      if (autoTaggedSceneRef.current === options.scene_url) return;
-      const hasPreloadedTags = options.preLoadedTags && options.preLoadedTags.length > 0;
-      autoTaggedSceneRef.current = options.scene_url;
-      if (hasPreloadedTags) return;
-      await bulkCreateTags();
-    };
-    doBulkCreate();
-  }, [
-    blocks,
-    options.scene_url,
-    options.preLoadedTags,
-    options.preLoadedTagsLoading
-  ]);
-  const clearSelection = useCallback(() => {
-    var _a;
-    setSelectionMenu(null);
-    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
-  }, []);
-  useEffect(() => {
-    if (!selectionMenu) {
-      setMenuPlacement("top");
-    }
-  }, [selectionMenu]);
-  useEffect(() => {
-    if (selectionMenu && menuRef.current) {
-      const rect = menuRef.current.getBoundingClientRect();
-      if (menuPlacement === "top" && rect.top < 100) {
-        setMenuPlacement("bottom");
-      } else if (menuPlacement === "bottom" && rect.bottom > window.innerHeight - 40 && rect.top > 300) {
-        setMenuPlacement("top");
-      }
-    }
-  }, [selectionMenu, menuPlacement]);
+      )
+    ] })
+  ] });
+}
+function useScriptBreakdownScene(options) {
+  const [tags, setTags] = useState(options.preLoadedTags || []);
+  const [selectionMenu, setSelectionMenu] = useState(null);
+  const autoTaggedSceneRef = useRef(null);
+  const [scene, setScene] = useState(null);
+  const [menuPlacement, setMenuPlacement] = useState("top");
+  const [sceneBrief, setSceneBrief] = useState("");
+  const [isSummarizing, setIsSummarizing] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const menuRef = useRef(null);
   useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (selectionMenu && !e.target.closest(".tag-menu")) {
-        clearSelection();
+    setIsLoading(true);
+    const fetchScene = async () => {
+      try {
+        const response = await fetch(options.scene_url, options.fetchOptions);
+        if (response.ok) {
+          const text = await response.text();
+          setScene({ content: text });
+        } else {
+          console.error("Failed to fetch scene:", response);
+          setError(true);
+        }
+        setIsLoading(false);
+      } catch (error2) {
+        setError(true);
+        setIsLoading(false);
+        console.error("Error fetching scene:", error2);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [selectionMenu, clearSelection]);
-  const getAbsoluteOffset = (container, targetNode, targetOffset) => {
-    let absoluteOffset = 0;
-    let found = false;
-    const traverse = (node) => {
+    fetchScene();
+  }, []);
+  const blocks = useMemo(() => {
+    if (!scene || !scene.content) return [];
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(scene.content, "text/html");
+    const divs = Array.from(doc.querySelectorAll("div"));
+    const parsedBlocks = [];
+    const typeMap = {
+      divtype0: "SCENE_HEADING",
+      divtype2: "ACTION",
+      divtype3: "CHARACTER",
+      divtype4: "PARENTHETICAL",
+      divtype5: "DIALOGUE",
+      divtype6: "TRANSITION"
+    };
+    divs.forEach((div) => {
       var _a;
-      if (found) return;
-      if (node === targetNode) {
-        absoluteOffset += targetOffset;
-        found = true;
-        return;
-      }
-      if (node.nodeType === Node.TEXT_NODE) {
-        absoluteOffset += ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
-      } else {
-        for (let i = 0; i < node.childNodes.length; i++) {
-          traverse(node.childNodes[i]);
-          if (found) return;
+      const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
+      if (!divText) return;
+      let type = "ACTION";
+      for (const className of Array.from(div.classList)) {
+        if (typeMap[className]) {
+          type = typeMap[className];
+          break;
         }
       }
-    };
-    traverse(container);
-    return found ? absoluteOffset : null;
-  };
-  const handleMouseUp = () => {
-    const selection = window.getSelection();
-    if (!selection || selection.isCollapsed || !selection.toString().trim())
-      return;
-    const range = selection.getRangeAt(0);
-    let container = range.commonAncestorContainer;
-    if (container.nodeType === Node.TEXT_NODE)
-      container = container.parentElement;
-    const blockElem = container.closest("[data-block-id]");
-    if (!blockElem) return;
-    const blockId = blockElem.getAttribute("data-block-id");
-    const startOffset = getAbsoluteOffset(
-      blockElem,
-      range.startContainer,
-      range.startOffset
-    );
-    const endOffset = getAbsoluteOffset(
-      blockElem,
-      range.endContainer,
-      range.endOffset
-    );
-    if (startOffset !== null && endOffset !== null) {
-      const rect = range.getBoundingClientRect();
-      const blockRect = blockElem.getBoundingClientRect();
-      setSelectionMenu({
-        blockId,
-        startIndex: Math.min(startOffset, endOffset),
-        endIndex: Math.max(startOffset, endOffset),
-        text: selection.toString().trim(),
-        top: rect.top - blockRect.top,
-        left: rect.left - blockRect.left + rect.width / 2
-      });
-    }
-  };
-  const addTag = async (categoryId) => {
-    var _a;
-    if (!selectionMenu) return;
-    const newTag = {
-      id: uuid(),
-      block_id: selectionMenu.blockId,
-      category_id: categoryId,
-      name: selectionMenu.text,
-      start_index: selectionMenu.startIndex,
-      end_index: selectionMenu.endIndex
-    };
-    if (categoryId === "PROP" || categoryId === "SET_PROP") {
-      newTag.quantity = 1;
-    } else if (categoryId === "CAST") {
-      newTag.look = "";
-      newTag.age = "";
-    }
-    setTags((prev) => {
-      const filtered = prev.filter(
-        (t) => t.block_id !== newTag.block_id || !(newTag.end_index > t.start_index && newTag.start_index < t.end_index)
-      );
-      return [...filtered, newTag];
+      const idAttr = div.getAttribute("id");
+      const blockId = idAttr && idAttr.startsWith("par") ? idAttr.substring(3) : idAttr || uuid();
+      parsedBlocks.push({ id: blockId, type, text: divText });
     });
-    clearSelection();
-    try {
-      await ((_a = options.onTagAdded) == null ? void 0 : _a.call(options, newTag));
-    } catch (error2) {
-      console.error("Failed to add tag:", error2);
-      setTags((prev) => prev.filter((t) => t.id !== newTag.id));
-    }
-  };
-  const removeTag = async (e, id) => {
+    return parsedBlocks;
+  }, [scene]);
+  const characters = useMemo(() => {
+    const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
+      const text = b.text.trim().toUpperCase();
+      const parenIndex = text.indexOf("(");
+      return parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
+    }).filter(Boolean);
+    return [...new Set(chars)];
+  }, [blocks]);
+  const handleAISummarize = async () => {
     var _a;
-    e.stopPropagation();
-    e.preventDefault();
-    const tagToRemove = tags.find((t) => t.id === id);
-    if (!tagToRemove) return;
-    setTags((prev) => prev.filter((t) => t.id !== id));
-    clearSelection();
-    try {
-      await ((_a = options.onTagRemoved) == null ? void 0 : _a.call(options, id));
-    } catch (error2) {
-      console.error("Failed to remove tag:", error2);
-      setTags((prev) => [...prev, tagToRemove]);
-    }
-  };
-  const updateTag = async (id, categoryId, details) => {
-    var _a, _b, _c, _d;
-    const tagToUpdate = tags.find((t) => t.id === id);
-    if (!tagToUpdate) return;
-    const updatedFields = __spreadValues({}, details);
-    if (categoryId) {
-      updatedFields.category_id = categoryId;
-      if (categoryId === "PROP" || categoryId === "SET_PROP") {
-        updatedFields.quantity = (_a = tagToUpdate.quantity) != null ? _a : 1;
-      } else if (categoryId === "CAST") {
-        updatedFields.look = (_b = tagToUpdate.look) != null ? _b : "";
-        updatedFields.age = (_c = tagToUpdate.age) != null ? _c : "";
+    setIsSummarizing(true);
+    const res = await ((_a = options.onAISummarize) == null ? void 0 : _a.call(options, scene.content));
+    if (res.ok) {
+      const data = await res.json();
+      setIsSummarizing(false);
+      let parsedData = [];
+      let parsedSummaryData = {};
+      try {
+        const normalData = JSON.parse(data.data);
+        if (Array.isArray(normalData)) {
+          parsedData = Array.isArray(normalData[0]) ? normalData[0] : [];
+          const summary = Array.isArray(normalData[1]) ? normalData[1] : [];
+          parsedSummaryData = summary[0] || {};
+        }
+      } catch (error2) {
+        console.error("Error parsing AI summary data:", error2);
       }
-    }
-    setTags(
-      (prev) => prev.map((t) => {
-        if (t.id === id) return __spreadValues(__spreadValues({}, t), updatedFields);
-        if (details && t.name === tagToUpdate.name && t.category_id === tagToUpdate.category_id) {
-          return __spreadValues(__spreadValues({}, t), details);
+      setSceneBrief(parsedSummaryData.summarise || "");
+      const newTags = [];
+      parsedData.forEach((aiTag) => {
+        if (!aiTag.block_id || !aiTag.category_id || typeof aiTag.start_index !== "number" || typeof aiTag.end_index !== "number") {
+          return;
         }
-        return t;
-      })
-    );
-    if (categoryId) clearSelection();
-    try {
-      await ((_d = options.onTagUpdated) == null ? void 0 : _d.call(options, id, categoryId || null, details));
-    } catch (error2) {
-      console.error("Failed to update tag:", error2);
-      setTags((prev) => prev.map((t) => t.id === id ? tagToUpdate : t));
+        const newTag = {
+          id: aiTag.id || uuid(),
+          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
+        };
+        if (aiTag.category_id === "PROP" || aiTag.category_id === "SET_PROP") {
+          newTag.quantity = 1;
+        } else if (aiTag.category_id === "CAST") {
+          newTag.look = "";
+          newTag.age = "";
+        }
+        newTags.push(newTag);
+      });
+      if (newTags.length > 0) {
+        const originalTags = tags;
+        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;
+        });
+        try {
+          if (options.onTagsBulkAdded) {
+            await options.onTagsBulkAdded(newTags, parsedSummaryData.summarise);
+          }
+        } catch (error2) {
+          console.error("Failed to bulk add AI-generated tags:", error2);
+          setTags(originalTags);
+        }
+      }
+      return data;
+    } else {
+      setIsSummarizing(false);
+      console.error("Failed to summarize scene:", res);
     }
   };
-  return {
-    scene,
-    blocks,
-    characters,
-    isLoading,
-    error,
-    tags,
-    selectionMenu,
-    handleMouseUp,
-    addTag,
-    updateTag,
-    removeTag,
-    clearSelection,
-    menuPlacement,
-    menuRef,
-    sceneBrief,
-    setSceneBrief,
-    handleAISummarize,
-    isSummarizing
-  };
-}
-function ModalLayout({
-  children,
-  onClose,
-  title,
-  maxWidth = "max-w-4xl",
-  menuRef
-}) {
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: menuRef,
-      onClick: onClose,
-      className: "fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-xs",
-      "data-lenis-prevent": "true",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center p-4 sm:p-6", children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onClick: (e) => e.stopPropagation(),
-            className: `relative w-full ${maxWidth} bg-white rounded-3xl shadow-2xl transform transition-all duration-300 scale-100 opacity-100 animate-modal`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 pb-3 pt-6 px-6", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-xl sm:text-2xl font-medium text-blumine-600 line-clamp-1", children: title }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onClose,
-                    className: "w-10 h-10 flex items-center justify-center rounded-full border border-blumine-600 text-blumine-600 hover:bg-blumine-600/10 hover:rotate-90 transition-all duration-300",
-                    "aria-label": "Close",
-                    children: /* @__PURE__ */ jsx(X, { size: 20 })
-                  }
-                )
-              ] }),
-              children
-            ]
+  const bulkCreateTags = useCallback(async () => {
+    if (blocks.length === 0) return;
+    const newTags = [];
+    const seenCharacters = /* @__PURE__ */ new Set();
+    const timeOfDays = ["DAY", "NIGHT"];
+    const isTimeOfDay = (str) => timeOfDays.includes(str.toUpperCase());
+    blocks.forEach((block) => {
+      if (block.type === "CHARACTER") {
+        const text = block.text.trim();
+        const parenIndex = text.indexOf("(");
+        const charName = parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
+        if (charName && !seenCharacters.has(charName.toUpperCase())) {
+          seenCharacters.add(charName.toUpperCase());
+          const startIndex = text.indexOf(charName);
+          if (startIndex !== -1) {
+            newTags.push({
+              id: uuid(),
+              block_id: block.id,
+              category_id: "CAST",
+              name: charName,
+              start_index: startIndex,
+              end_index: startIndex + charName.length,
+              look: "",
+              age: ""
+            });
           }
-        ) }),
-        /* @__PURE__ */ jsx("style", { children: `
-          @keyframes modal {
-            0% {
-              opacity: 0;
-              transform: translateY(20px) scale(0.95);
-            }
-            100% {
-              opacity: 1;
-              transform: translateY(0) scale(1);
-            }
+        }
+      } else if (block.type === "SCENE_HEADING") {
+        const text = block.text.trim();
+        const typeMatch = text.match(
+          /^(INT\/EXT|INT\.?\/EXT\.?|INT\.EXT\.?|INT|EXT|I\/E)\.?\s+/i
+        );
+        let remainingText = text;
+        let offset = 0;
+        if (typeMatch) {
+          offset = typeMatch[0].length;
+          remainingText = text.substring(offset);
+        }
+        const parts = remainingText.split(/\s+-\s+/);
+        if (parts.length > 0) {
+          const locationName = parts[0].trim();
+          const locStart = text.indexOf(locationName, offset);
+          if (locStart !== -1 && locationName) {
+            newTags.push({
+              id: uuid(),
+              block_id: block.id,
+              category_id: "LOCATION",
+              name: locationName,
+              start_index: locStart,
+              end_index: locStart + locationName.length
+            });
           }
-          .animate-modal {
-            animation: modal 0.3s ease-out forwards;
+          if (parts.length > 1) {
+            const secondPart = parts[1].trim();
+            const isLast = parts.length === 2;
+            if (!isLast || !isTimeOfDay(secondPart)) {
+              const subLocStart = text.indexOf(
+                secondPart,
+                locStart + locationName.length
+              );
+              if (subLocStart !== -1 && secondPart) {
+                newTags.push({
+                  id: uuid(),
+                  block_id: block.id,
+                  category_id: "SUBLOCATION",
+                  name: secondPart,
+                  start_index: subLocStart,
+                  end_index: subLocStart + secondPart.length
+                });
+              }
+            }
           }
-        ` })
-      ]
-    }
-  );
-}
-var modal_layout_default = ModalLayout;
-var FormikSelect = ({
-  label,
-  name,
-  selectedOption,
-  optionData,
-  value,
-  disable,
-  divClasses,
-  valueProperty = "name",
-  labelProperty = "name",
-  label2propery,
-  brackets,
-  className,
-  enableRedAsterick = false,
-  disableOptionProperty = "disable",
-  disabledOptionText = "",
-  onChange
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
-      label,
-      enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      Field,
-      {
-        name,
-        as: "select",
-        value,
-        disabled: disable,
-        onChange,
-        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all`,
-        children: [
-          /* @__PURE__ */ jsx("option", { selected: true, value: "", disabled: true, className: "capitalize", children: selectedOption }),
-          optionData == null ? void 0 : optionData.map((option, index) => /* @__PURE__ */ jsxs(
-            "option",
-            {
-              value: option[valueProperty],
-              disabled: option[disableOptionProperty],
-              children: [
-                option[labelProperty],
-                label2propery ? brackets ? ` (${option[label2propery]})` : option[label2propery] : "",
-                " ",
-                option[disableOptionProperty] && `(${disabledOptionText})`
-              ]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
+        }
       }
-    )
-  ] });
-};
-var FormikInput = (_a) => {
-  var _b = _a, {
-    label,
-    name,
-    type,
-    placeholder,
-    className,
-    labelClassName,
-    readOnly,
-    divClasses,
-    length,
-    disable,
-    min = 0,
-    max,
-    convertToText = false,
-    enableRedAsterick = false,
-    case_sensitivity = "normal"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "name",
-    "type",
-    "placeholder",
-    "className",
-    "labelClassName",
-    "readOnly",
-    "divClasses",
-    "length",
-    "disable",
-    "min",
-    "max",
-    "convertToText",
-    "enableRedAsterick",
-    "case_sensitivity"
+    });
+    if (newTags.length > 0) {
+      const originalTags = tags;
+      setTags((prev) => {
+        const merged = [...prev];
+        const existingChars = new Set(
+          merged.filter(
+            (t) => t.category_id === "CHARACTER" || t.category_id === "CAST"
+          ).map((t) => t.name.toUpperCase())
+        );
+        newTags.forEach((newTag) => {
+          if (newTag.category_id === "CHARACTER") {
+            if (existingChars.has(newTag.name.toUpperCase())) return;
+            existingChars.add(newTag.name.toUpperCase());
+          }
+          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;
+      });
+      try {
+        if (options.onTagsBulkAdded) {
+          await options.onTagsBulkAdded(newTags);
+        }
+      } catch (error2) {
+        console.error("Failed to bulk create tags:", error2);
+        setTags(originalTags);
+      }
+    }
+  }, [blocks, tags, options.onTagsBulkAdded]);
+  useEffect(() => {
+    setSceneBrief("");
+    autoTaggedSceneRef.current = null;
+  }, [options.scene_url]);
+  useEffect(() => {
+    if (options.preLoadedTags && options.preLoadedTags.length > 0) {
+      setTags((prev) => {
+        if (JSON.stringify(prev) === JSON.stringify(options.preLoadedTags)) {
+          return prev;
+        }
+        return options.preLoadedTags || [];
+      });
+    }
+  }, [options.preLoadedTags]);
+  useEffect(() => {
+    const doBulkCreate = async () => {
+      if (blocks.length === 0) return;
+      if (options.preLoadedTagsLoading) return;
+      if (autoTaggedSceneRef.current === options.scene_url) return;
+      const hasPreloadedTags = options.preLoadedTags && options.preLoadedTags.length > 0;
+      autoTaggedSceneRef.current = options.scene_url;
+      if (hasPreloadedTags) return;
+      await bulkCreateTags();
+    };
+    doBulkCreate();
+  }, [
+    blocks,
+    options.scene_url,
+    options.preLoadedTags,
+    options.preLoadedTagsLoading
   ]);
-  const { setFieldValue } = useFormikContext();
-  const handleCaseChange = (e) => {
-    let value = e.target.value;
-    if (type === "number" && min !== void 0) {
-      if (value !== "" && Number(value) < min) return;
+  const clearSelection = useCallback(() => {
+    var _a;
+    setSelectionMenu(null);
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  }, []);
+  useEffect(() => {
+    if (!selectionMenu) {
+      setMenuPlacement("top");
     }
-    switch (case_sensitivity) {
-      case "lowercase":
-        value = value.toLowerCase();
-        break;
-      case "uppercase":
-        value = value.toUpperCase();
-        break;
+  }, [selectionMenu]);
+  useEffect(() => {
+    if (selectionMenu && menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      if (menuPlacement === "top" && rect.top < 100) {
+        setMenuPlacement("bottom");
+      } else if (menuPlacement === "bottom" && rect.bottom > window.innerHeight - 40 && rect.top > 300) {
+        setMenuPlacement("top");
+      }
     }
-    setFieldValue(name, value);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
-    /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: `${labelClassName} mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
-        children: [
-          label,
-          enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
-        ]
+  }, [selectionMenu, menuPlacement]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (selectionMenu && !e.target.closest(".tag-menu")) {
+        clearSelection();
       }
-    ),
-    /* @__PURE__ */ jsx(
-      Field,
-      __spreadProps(__spreadValues({
-        name,
-        placeholder,
-        readOnly,
-        type,
-        maxLength: length,
-        disabled: disable,
-        max,
-        min,
-        onChange: handleCaseChange
-      }, props), {
-        className: `${className} rounded-[2.5rem] block w-full px-3 py-2.5 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
-      })
-    ),
-    /* @__PURE__ */ jsx(
-      ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [selectionMenu, clearSelection]);
+  const getAbsoluteOffset = (container, targetNode, targetOffset) => {
+    let absoluteOffset = 0;
+    let found = false;
+    const traverse = (node) => {
+      var _a;
+      if (found) return;
+      if (node === targetNode) {
+        absoluteOffset += targetOffset;
+        found = true;
+        return;
       }
-    )
-  ] });
-};
-var FormikTextarea = ({
-  label,
-  name,
-  placeholder,
-  readOnly,
-  divClasses = "",
-  className = "",
-  length,
-  disable,
-  min,
-  max,
-  enableRedAsterick = false
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: `w-full ${divClasses}`, children: [
-    /* @__PURE__ */ jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
-      label,
-      enableRedAsterick && /* @__PURE__ */ jsx(AsteriskIcon, { className: "size-3 text-red-500" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Field,
-      {
-        as: "textarea",
-        name,
-        placeholder,
-        readOnly,
-        maxLength: length,
-        disabled: disable,
-        max,
-        min,
-        className: `${className} block w-full px-4 py-3 text-slate-700 placeholder-slate-400 placeholder:capitalize bg-white border border-slate-300/80 rounded-2xl focus:border-blumine-500 focus:ring-2 focus:ring-blumine-500/50 focus:outline-none transition-all disabled:opacity-70`
+      if (node.nodeType === Node.TEXT_NODE) {
+        absoluteOffset += ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
+      } else {
+        for (let i = 0; i < node.childNodes.length; i++) {
+          traverse(node.childNodes[i]);
+          if (found) return;
+        }
       }
-    ),
-    /* @__PURE__ */ jsx(
-      ErrorMessage,
-      {
-        name,
-        className: "text-red-500 text-sm mt-1",
-        component: "div"
+    };
+    traverse(container);
+    return found ? absoluteOffset : null;
+  };
+  const handleMouseUp = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !selection.toString().trim())
+      return;
+    const range = selection.getRangeAt(0);
+    let container = range.commonAncestorContainer;
+    if (container.nodeType === Node.TEXT_NODE)
+      container = container.parentElement;
+    const blockElem = container.closest("[data-block-id]");
+    if (!blockElem) return;
+    const blockId = blockElem.getAttribute("data-block-id");
+    const startOffset = getAbsoluteOffset(
+      blockElem,
+      range.startContainer,
+      range.startOffset
+    );
+    const endOffset = getAbsoluteOffset(
+      blockElem,
+      range.endContainer,
+      range.endOffset
+    );
+    if (startOffset !== null && endOffset !== null) {
+      const rect = range.getBoundingClientRect();
+      const blockRect = blockElem.getBoundingClientRect();
+      setSelectionMenu({
+        blockId,
+        startIndex: Math.min(startOffset, endOffset),
+        endIndex: Math.max(startOffset, endOffset),
+        text: selection.toString().trim(),
+        top: rect.top - blockRect.top,
+        left: rect.left - blockRect.left + rect.width / 2
+      });
+    }
+  };
+  const addTag = async (categoryId) => {
+    var _a;
+    if (!selectionMenu) return;
+    const newTag = {
+      id: uuid(),
+      block_id: selectionMenu.blockId,
+      category_id: categoryId,
+      name: selectionMenu.text,
+      start_index: selectionMenu.startIndex,
+      end_index: selectionMenu.endIndex
+    };
+    if (categoryId === "PROP" || categoryId === "SET_PROP") {
+      newTag.quantity = 1;
+    } else if (categoryId === "CAST") {
+      newTag.look = "";
+      newTag.age = "";
+    }
+    setTags((prev) => {
+      const filtered = prev.filter(
+        (t) => t.block_id !== newTag.block_id || !(newTag.end_index > t.start_index && newTag.start_index < t.end_index)
+      );
+      return [...filtered, newTag];
+    });
+    clearSelection();
+    try {
+      await ((_a = options.onTagAdded) == null ? void 0 : _a.call(options, newTag));
+    } catch (error2) {
+      console.error("Failed to add tag:", error2);
+      setTags((prev) => prev.filter((t) => t.id !== newTag.id));
+    }
+  };
+  const removeTag = async (e, id) => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    const tagToRemove = tags.find((t) => t.id === id);
+    if (!tagToRemove) return;
+    setTags((prev) => prev.filter((t) => t.id !== id));
+    clearSelection();
+    try {
+      await ((_a = options.onTagRemoved) == null ? void 0 : _a.call(options, id));
+    } catch (error2) {
+      console.error("Failed to remove tag:", error2);
+      setTags((prev) => [...prev, tagToRemove]);
+    }
+  };
+  const updateTag = async (id, categoryId, details) => {
+    var _a, _b, _c, _d;
+    const tagToUpdate = tags.find((t) => t.id === id);
+    if (!tagToUpdate) return;
+    const updatedFields = __spreadValues({}, details);
+    if (categoryId) {
+      updatedFields.category_id = categoryId;
+      if (categoryId === "PROP" || categoryId === "SET_PROP") {
+        updatedFields.quantity = (_a = tagToUpdate.quantity) != null ? _a : 1;
+      } else if (categoryId === "CAST") {
+        updatedFields.look = (_b = tagToUpdate.look) != null ? _b : "";
+        updatedFields.age = (_c = tagToUpdate.age) != null ? _c : "";
       }
-    )
-  ] });
-};
+    }
+    setTags(
+      (prev) => prev.map((t) => {
+        if (t.id === id) return __spreadValues(__spreadValues({}, t), updatedFields);
+        if (details && t.name === tagToUpdate.name && t.category_id === tagToUpdate.category_id) {
+          return __spreadValues(__spreadValues({}, t), details);
+        }
+        return t;
+      })
+    );
+    if (categoryId) clearSelection();
+    try {
+      await ((_d = options.onTagUpdated) == null ? void 0 : _d.call(options, id, categoryId || null, details));
+    } catch (error2) {
+      console.error("Failed to update tag:", error2);
+      setTags((prev) => prev.map((t) => t.id === id ? tagToUpdate : t));
+    }
+  };
+  return {
+    scene,
+    blocks,
+    characters,
+    isLoading,
+    error,
+    tags,
+    selectionMenu,
+    handleMouseUp,
+    addTag,
+    updateTag,
+    removeTag,
+    clearSelection,
+    menuPlacement,
+    menuRef,
+    sceneBrief,
+    setSceneBrief,
+    handleAISummarize,
+    isSummarizing
+  };
+}
+function ModalLayout({
+  children,
+  onClose,
+  title,
+  maxWidth = "max-w-4xl",
+  menuRef
+}) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      onClick: onClose,
+      className: "fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-xs",
+      "data-lenis-prevent": "true",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center p-4 sm:p-6", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            className: `relative w-full ${maxWidth} bg-white rounded-3xl shadow-2xl transform transition-all duration-300 scale-100 opacity-100 animate-modal`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 pb-3 pt-6 px-6", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-xl sm:text-2xl font-medium text-blumine-600 line-clamp-1", children: title }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "w-10 h-10 flex items-center justify-center rounded-full border border-blumine-600 text-blumine-600 hover:bg-blumine-600/10 hover:rotate-90 transition-all duration-300",
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ jsx(X, { size: 20 })
+                  }
+                )
+              ] }),
+              children
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes modal {
+            0% {
+              opacity: 0;
+              transform: translateY(20px) scale(0.95);
+            }
+            100% {
+              opacity: 1;
+              transform: translateY(0) scale(1);
+            }
+          }
+          .animate-modal {
+            animation: modal 0.3s ease-out forwards;
+          }
+        ` })
+      ]
+    }
+  );
+}
+var modal_layout_default = ModalLayout;
 
 // data/shot-data.ts
 var shot_types = [
@@ -5326,22 +5525,32 @@ var ProductionSetupModal = ({
   initialValues
 }) => {
   return /* @__PURE__ */ jsx("div", { className: "min-h-[80vh] flex items-center justify-center px-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "my-8 text-center", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-2xl md:text-3xl font-semibold text-slate-900 tracking-tight", children: "Production Setup for this Scene" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 mt-2", children: "Configure your scene and camera setup to get started" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-6 md:p-8", children: /* @__PURE__ */ jsx(
       Formik,
       {
-        initialValues: initialValues || { numCameras: 1, scene_type: "" },
+        initialValues: initialValues || {
+          numCameras: 1,
+          scene_type: "",
+          dance_choreographer_required: false,
+          action_sequence_required: false
+        },
         validationSchema: Yup.object({
           numCameras: Yup.number().min(1, "Must be at least 1").max(20, "Cannot add more than 20 cameras").required("Number of cameras is required"),
           scene_type: Yup.string().required("Scene type is required")
         }),
         onSubmit: async (values) => {
-          await initializeProduction(values.numCameras, values.scene_type);
+          await initializeProduction(
+            values.numCameras,
+            values.scene_type,
+            values.dance_choreographer_required,
+            values.action_sequence_required
+          );
         },
-        children: ({ isSubmitting, setFieldValue }) => /* @__PURE__ */ jsxs(Form, { className: "flex flex-col gap-6", children: [
+        children: ({ isSubmitting, setFieldValue, values }) => /* @__PURE__ */ jsxs(Form, { className: "flex flex-col gap-6", children: [
           /* @__PURE__ */ jsxs("div", { className: "grid gap-5", children: [
             /* @__PURE__ */ jsx(
               FormikSelect,
@@ -5364,7 +5573,65 @@ var ProductionSetupModal = ({
                 max: 20,
                 enableRedAsterick: true
               }
-            )
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `relative p-5 rounded-3xl border transition-all duration-300 flex flex-col gap-4 group cursor-pointer ${values.dance_choreographer_required ? "bg-blumine-50/30 border-blumine-200 shadow-sm" : "bg-slate-50/50 border-slate-100 hover:border-slate-200"}`,
+                  onClick: () => setFieldValue(
+                    "dance_choreographer_required",
+                    !values.dance_choreographer_required
+                  ),
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-[15px] font-bold text-slate-800", children: "Dance Sequence" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 font-medium mt-0.5", children: "Choreography needed" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        isOn: values.dance_choreographer_required || false,
+                        handleToggle: () => setFieldValue(
+                          "dance_choreographer_required",
+                          !values.dance_choreographer_required
+                        ),
+                        activeColor: "bg-blumine-600",
+                        divClasses: "w-fit!"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `relative p-5 rounded-3xl border transition-all duration-300 flex flex-col gap-4 group cursor-pointer ${values.action_sequence_required ? "bg-rose-50/30 border-rose-200 shadow-sm" : "bg-slate-50/50 border-slate-100 hover:border-slate-200"}`,
+                  onClick: () => setFieldValue(
+                    "action_sequence_required",
+                    !values.action_sequence_required
+                  ),
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-[15px] font-bold text-slate-800", children: "Action Sequence" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500 font-medium mt-0.5", children: "Stunt & combat logic" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        isOn: values.action_sequence_required || false,
+                        handleToggle: () => setFieldValue(
+                          "action_sequence_required",
+                          !values.action_sequence_required
+                        ),
+                        activeColor: "bg-rose-500",
+                        divClasses: "w-fit!"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-3 bg-slate-50 border border-slate-100 p-4 rounded-xl", children: [
             /* @__PURE__ */ jsx(Info, { className: "w-5 h-5 text-slate-400 shrink-0 mt-0.5" }),
@@ -5906,14 +6173,21 @@ function ShotBreakdownView({
             children: /* @__PURE__ */ jsx(
               production_setup_modal_default,
               {
-                initializeProduction: (count, type) => {
-                  initializeProduction(count, type).then(() => {
+                initializeProduction: (count, type, dance_choreographer_required, action_sequence_required) => {
+                  initializeProduction(
+                    count,
+                    type,
+                    dance_choreographer_required,
+                    action_sequence_required
+                  ).then(() => {
                     setIsInitModalOpen(false);
                   });
                 },
                 initialValues: {
                   numCameras: cameras.length || 1,
-                  scene_type: sceneType
+                  scene_type: sceneType,
+                  dance_choreographer_required: false,
+                  action_sequence_required: false
                 }
               }
             )
@@ -6129,13 +6403,19 @@ function useShotBreakdownScene(options) {
       });
     }
   };
-  const initializeProduction = async (count, type) => {
+  const initializeProduction = async (count, type, dance_choreographer_required, action_sequence_required) => {
     var _a;
     const newCameras = [];
     for (let i = 1; i <= count; i++) {
       newCameras.push({ name: `Camera ${String.fromCharCode(64 + i)}` });
     }
-    const result = (_a = options.onProductionInitialized) == null ? void 0 : _a.call(options, newCameras, type);
+    const result = (_a = options.onProductionInitialized) == null ? void 0 : _a.call(
+      options,
+      newCameras,
+      type,
+      dance_choreographer_required,
+      action_sequence_required
+    );
     if (result instanceof Promise) {
       setCameras(newCameras);
       setSceneType(type);
@@ -6259,7 +6539,180 @@ function useShotBreakdownScene(options) {
     menuRef
   };
 }
+function SceneScriptView({
+  blocks,
+  isLoading = false,
+  sceneNumber,
+  title
+}) {
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
+  useEffect(() => {
+    const fontId = "google-font-courier-prime";
+    const styleId = "screenplay-editor-force-v4";
+    if (!document.getElementById(fontId)) {
+      const link = document.createElement("link");
+      link.id = fontId;
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
+      document.head.appendChild(link);
+    }
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        [data-scene-script-view] *, 
+        [data-scene-script-view] div, 
+        [data-scene-script-view] span {
+          font-family: ${COURIER_STACK} !important;
+          -webkit-font-smoothing: antialiased;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, [COURIER_STACK]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading script..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative bg-[#fdfdfc] shadow-[0_10px_30px_rgba(0,0,0,0.04),0_1px_8px_rgba(0,0,0,0.02)] border border-zinc-100 rounded-sm md:rounded-md flex flex-col w-full max-w-[210mm] min-h-auto shrink-0 pb-24",
+      style: {
+        fontFamily: COURIER_STACK,
+        paddingLeft: "1.5in",
+        paddingRight: "1in",
+        paddingTop: "1in",
+        paddingBottom: "1in",
+        lineHeight: "1.2"
+      },
+      "data-scene-script-view": "true",
+      children: blocks.map((block) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
+          style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
+            minHeight: "1.5rem"
+          }),
+          children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            block.sceneNumber && /* @__PURE__ */ jsx("span", { className: "absolute -left-16 text-zinc-400 font-bold select-none", children: block.sceneNumber }),
+            block.sceneType && /* @__PURE__ */ jsx("span", { className: "font-bold", children: block.sceneType }),
+            /* @__PURE__ */ jsx("span", { className: "font-bold", children: block.text }),
+            block.timeOfDay && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: "-" }),
+              /* @__PURE__ */ jsx("span", { className: "font-bold", children: block.timeOfDay })
+            ] })
+          ] }) : block.text
+        },
+        block.id
+      ))
+    }
+  );
+}
+function useSceneScript(options) {
+  const [sceneContent, setSceneContent] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let isMounted = true;
+    setIsLoading(true);
+    setError(null);
+    const fetchScene = async () => {
+      try {
+        const response = await fetch(options.scene_url, options.fetchOptions);
+        if (response.ok) {
+          const text = await response.text();
+          if (isMounted) {
+            setSceneContent(text);
+          }
+        } else {
+          if (isMounted) {
+            setError(`Failed to fetch scene: ${response.statusText}`);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "An unknown error occurred");
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchScene();
+    return () => {
+      isMounted = false;
+    };
+  }, [options.scene_url]);
+  const blocks = useMemo(() => {
+    if (!sceneContent) return [];
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(sceneContent, "text/html");
+    const divs = Array.from(doc.querySelectorAll("div"));
+    const parsedBlocks = [];
+    const typeMap = {
+      divtype0: "SCENE_HEADING",
+      divtype2: "ACTION",
+      divtype3: "CHARACTER",
+      divtype4: "PARENTHETICAL",
+      divtype5: "DIALOGUE",
+      divtype6: "TRANSITION"
+    };
+    divs.forEach((div) => {
+      var _a;
+      const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
+      if (!divText && !div.classList.contains("divtype0")) return;
+      let type = "ACTION";
+      for (const className of Array.from(div.classList)) {
+        if (typeMap[className]) {
+          type = typeMap[className];
+          break;
+        }
+      }
+      const idAttr = div.getAttribute("id");
+      const blockId = idAttr && idAttr.startsWith("par") ? idAttr.substring(3) : idAttr || uuid();
+      let sceneNumber;
+      let sceneType;
+      let timeOfDay;
+      let blockText = divText;
+      if (type === "SCENE_HEADING") {
+        const typeMatch = blockText.match(/^(INT\.?\/EXT\.?|INT\.?|EXT\.?|I\/E)\s+/i);
+        if (typeMatch) {
+          const matchedType = typeMatch[1].toUpperCase();
+          if (matchedType.includes("INT") && matchedType.includes("EXT")) sceneType = "INT/EXT.";
+          else if (matchedType.includes("EXT")) sceneType = "EXT.";
+          else sceneType = "INT.";
+          blockText = blockText.substring(typeMatch[0].length).trim();
+        }
+        const timeMatch = blockText.match(/\s+-\s+(DAY|NIGHT|MORNING|EVENING|AFTERNOON|LATER|MOMENTS LATER|CONTINUOUS)$/i);
+        if (timeMatch) {
+          timeOfDay = timeMatch[1].toUpperCase();
+          blockText = blockText.substring(0, timeMatch.index).trim();
+        }
+        blockText = blockText.replace(/^-+\s*|\s*-+$/g, "").trim();
+      }
+      parsedBlocks.push({
+        id: blockId,
+        type,
+        text: blockText,
+        sceneNumber,
+        sceneType,
+        timeOfDay
+      });
+    });
+    return parsedBlocks;
+  }, [sceneContent]);
+  return {
+    blocks,
+    isLoading,
+    error,
+    sceneContent
+  };
+}
 
-export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, ShotBreakdownView, aperture_options, blockStyles, blockTypes, camera_angles, camera_movements, camera_supports, convertBlocksToSbx, fps_options, handleSaveAsPdf, handleSyncWithCloud, icons, lens_options, scene_types, shot_types, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, useShotBreakdownScene, uuid, vfx_types };
+export { CATEGORIES, SceneScriptView, ScreenplayEditorView, ScriptBreakdownSceneView, ShotBreakdownView, aperture_options, blockStyles, blockTypes, camera_angles, camera_movements, camera_supports, convertBlocksToSbx, fps_options, handleSaveAsPdf, handleSyncWithCloud, icons, lens_options, scene_types, shot_types, timeOfDayOptions, useSceneScript, useScreenplayEditor, useScriptBreakdownScene, useShotBreakdownScene, uuid, vfx_types };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map