@vishu1301/script-writing 1.5.8 → 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,6 +3298,368 @@ var SummarizeButton = ({
   );
 };
 var summarize_button_default = SummarizeButton;
+
+// data/crowd-data.ts
+var crowdAgeOption = [
+  { name: "Adult" },
+  { name: "Old" },
+  { name: "Teenage" },
+  { name: "Kid" }
+];
+var crowdTypeOption = [{ name: "Male" }, { name: "Female" }];
+var FormikSelect = ({
+  label,
+  name,
+  selectedOption,
+  optionData,
+  value,
+  disable,
+  divClasses,
+  valueProperty = "name",
+  labelProperty = "name",
+  label2propery,
+  brackets,
+  className,
+  enableRedAsterick = false,
+  disableOptionProperty = "disable",
+  disabledOptionText = "",
+  onChange
+}) => {
+  return /* @__PURE__ */ 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"
+  ]);
+  const { setFieldValue } = useFormikContext();
+  const handleCaseChange = (e) => {
+    let value = e.target.value;
+    if (type === "number" && min !== void 0) {
+      if (value !== "" && Number(value) < min) return;
+    }
+    switch (case_sensitivity) {
+      case "lowercase":
+        value = value.toLowerCase();
+        break;
+      case "uppercase":
+        value = value.toUpperCase();
+        break;
+    }
+    setFieldValue(name, value);
+  };
+  return /* @__PURE__ */ 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: `flex items-center rounded-full cursor-pointer relative ${isOn ? activeColor : inactiveColor} ${disable && "opacity-50 cursor-not-allowed"}`,
+          onClick: disable ? () => {
+          } : handleToggle,
+          role: "button",
+          "aria-pressed": isOn,
+          style: {
+            width: selectedSize.width,
+            height: selectedSize.height
+          },
+          children: /* @__PURE__ */ 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(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => removeOption(e, actualValue),
+                    className: "hover:text-red-500 transition-colors ml-0.5",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            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 ScriptBreakdownSceneView({
   blocks,
   characters,
@@ -3321,7 +3683,7 @@ function ScriptBreakdownSceneView({
 }) {
   const [expandedCategories, setExpandedCategories] = useState({});
   const [editingTagData, setEditingTagData] = useState(null);
-  const [tagForm, setTagForm] = useState({ quantity: 1, look: "", age: "" });
+  const [tagForm, setTagForm] = useState({ quantity: 1, look: "", age: "", age_range: [], crowd_type: [] });
   const [popupPlacement, setPopupPlacement] = useState({
     alignRight: false,
     alignBottom: false
@@ -3682,7 +4044,7 @@ function ScriptBreakdownSceneView({
                               title: tag.name,
                               onClick: (e) => {
                                 e.stopPropagation();
-                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST")
+                                if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST" && cat.id !== "EXTRA")
                                   return;
                                 if ((editingTagData == null ? void 0 : editingTagData.tag.id) === tag.id) {
                                   setEditingTagData(null);
@@ -3695,7 +4057,9 @@ function ScriptBreakdownSceneView({
                                   setTagForm({
                                     quantity: tag.quantity || 1,
                                     look: tag.look || "",
-                                    age: tag.age || ""
+                                    age: tag.age || "",
+                                    age_range: tag.age_range || [],
+                                    crowd_type: tag.crowd_type || []
                                   });
                                   setEditingTagData({
                                     tag,
@@ -3705,7 +4069,7 @@ function ScriptBreakdownSceneView({
                                   });
                                 }
                               },
-                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
+                              className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 cursor-pointer! ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
                               style: {
                                 color: cat.color,
                                 background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
@@ -3829,13 +4193,38 @@ function ScriptBreakdownSceneView({
                 )
               ] })
             ] }),
+            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({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}));
+                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, editingTagData.catId, __spreadValues(__spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}), editingTagData.catId === "EXTRA" ? {
+                      age_range: tagForm.age_range,
+                      crowd_type: tagForm.crowd_type
+                    } : {}));
                   }
                   setEditingTagData(null);
                 },
@@ -4376,196 +4765,6 @@ function ModalLayout({
   );
 }
 var modal_layout_default = ModalLayout;
-var FormikSelect = ({
-  label,
-  name,
-  selectedOption,
-  optionData,
-  value,
-  disable,
-  divClasses,
-  valueProperty = "name",
-  labelProperty = "name",
-  label2propery,
-  brackets,
-  className,
-  enableRedAsterick = false,
-  disableOptionProperty = "disable",
-  disabledOptionText = "",
-  onChange
-}) => {
-  return /* @__PURE__ */ 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"
-  ]);
-  const { setFieldValue } = useFormikContext();
-  const handleCaseChange = (e) => {
-    let value = e.target.value;
-    if (type === "number" && min !== void 0) {
-      if (value !== "" && Number(value) < min) return;
-    }
-    switch (case_sensitivity) {
-      case "lowercase":
-        value = value.toLowerCase();
-        break;
-      case "uppercase":
-        value = value.toUpperCase();
-        break;
-    }
-    setFieldValue(name, value);
-  };
-  return /* @__PURE__ */ 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"
-      }
-    )
-  ] });
-};
 
 // 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);