@vishu1301/script-writing 1.3.5 → 1.3.7

package/dist/index.cjs

@@ -5,6 +5,8 @@ var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var pdfjs = require('pdfjs-dist');
 var jsPDF = require('jspdf');
+var Yup = require('yup');
+var formik = require('formik');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -28,6 +30,7 @@ function _interopNamespace(e) {
 
 var pdfjs__namespace = /*#__PURE__*/_interopNamespace(pdfjs);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
+var Yup__namespace = /*#__PURE__*/_interopNamespace(Yup);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -48,6 +51,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var timeOfDayOptions = ["DAY", "NIGHT"];
 var blockTypes = [
   "SCENE_HEADING",
@@ -2354,7 +2369,7 @@ function ScriptBreakdownSceneView({
                 onClick: (e) => {
                   e.stopPropagation();
                   if (editingTagData.tag.id) {
-                    updateTag == null ? void 0 : updateTag(editingTagData.tag.id, null, __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({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}));
                   }
                   setEditingTagData(null);
                 },
@@ -2834,19 +2849,1855 @@ function useScriptBreakdownScene(options) {
     isSummarizing
   };
 }
+function ModalLayout({
+  children,
+  onClose,
+  title,
+  maxWidth = "max-w-4xl",
+  menuRef
+}) {
+  react.useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex min-h-full items-center justify-center p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 pb-3 pt-6 px-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl sm:text-2xl font-medium text-blumine-600 line-clamp-1", children: title }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+                  }
+                )
+              ] }),
+              children
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.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;
+var FormikSelect = ({
+  label,
+  name,
+  selectedOption,
+  optionData,
+  value,
+  disable,
+  divClasses,
+  valueProperty = "name",
+  labelProperty = "name",
+  label2propery,
+  brackets,
+  className,
+  enableRedAsterick = false,
+  disableOptionProperty = "disable",
+  disabledOptionText = "",
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
+      label,
+      enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      formik.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__ */ jsxRuntime.jsx("option", { selected: true, value: "", disabled: true, className: "capitalize", children: selectedOption }),
+          optionData == null ? void 0 : optionData.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "option",
+            {
+              value: option[valueProperty],
+              disabled: option[disableOptionProperty],
+              children: [
+                option[labelProperty],
+                label2propery ? brackets ? ` (${option[label2propery]})` : option[label2propery] : "",
+                " ",
+                option[disableOptionProperty] && `(${disabledOptionText})`
+              ]
+            },
+            index
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.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 } = formik.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__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: `${labelClassName} mb-1.5 text-sm font-medium text-slate-700 capitalize flex`,
+        children: [
+          label,
+          enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.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__ */ jsxRuntime.jsx(
+      formik.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__ */ jsxRuntime.jsxs("div", { className: `w-full ${divClasses}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 text-sm font-medium text-slate-700 capitalize flex`, children: [
+      label,
+      enableRedAsterick && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      formik.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__ */ jsxRuntime.jsx(
+      formik.ErrorMessage,
+      {
+        name,
+        className: "text-red-500 text-sm mt-1",
+        component: "div"
+      }
+    )
+  ] });
+};
+
+// data/shot-data.ts
+var shot_types = [
+  { name: "Extreme Close-Up (ECU)" },
+  { name: "Extreme Close-Up 2-Shot" },
+  { name: "Close-Up (CU)" },
+  { name: "Close-Up 2-Shot" },
+  { name: "Medium Close-Up (MCU)" },
+  { name: "Medium Close-Up 2-Shot" },
+  { name: "Medium Shot (MS)" },
+  { name: "Medium Shot 2-Shot" },
+  { name: "Medium Wide Shot (MWS)" },
+  { name: "Medium Wide 2-Shot" },
+  { name: "Wide Shot (WS)" },
+  { name: "Wide Shot 2-Shot" },
+  { name: "Extreme Wide Shot (EWS)" },
+  { name: "Establishing Shot" },
+  { name: "Over-the-Shoulder (OTS)" },
+  { name: "Over-the-Shoulder 2-Shot" },
+  { name: "Reverse Over-the-Shoulder" },
+  { name: "Point of View (POV)" },
+  { name: "Subjective POV" },
+  { name: "Objective Shot" },
+  { name: "Insert Shot" },
+  { name: "Cutaway Shot" },
+  { name: "Reaction Shot" },
+  { name: "Profile Shot" },
+  { name: "Profile 2-Shot" },
+  { name: "Silhouette Shot" }
+];
+var camera_angles = [
+  { name: "Eye Level" },
+  { name: "Low Angle" },
+  { name: "High Angle" },
+  { name: "Bird\u2019s Eye View (Top Shot)" },
+  { name: "Worm\u2019s Eye View (Ground Level)" },
+  { name: "Dutch Tilt (Canted Angle)" },
+  { name: "Overhead Shot" },
+  { name: "Underhead Shot" },
+  { name: "Shoulder Level" },
+  { name: "Hip Level" },
+  { name: "Knee Level" },
+  { name: "Ground Level Tracking Angle" },
+  { name: "Aerial Angle (Drone)" },
+  { name: "Subjective Angle (POV Angle)" }
+];
+var camera_movements = [
+  { name: "Static (Locked-Off)" },
+  { name: "Pan Left" },
+  { name: "Pan Right" },
+  { name: "Tilt Up" },
+  { name: "Tilt Down" },
+  { name: "Roll (Dutch Roll)" },
+  { name: "Dolly In" },
+  { name: "Dolly Out" },
+  { name: "Dolly Left" },
+  { name: "Dolly Right" },
+  { name: "Truck Left" },
+  { name: "Truck Right" },
+  { name: "Pedestal Up" },
+  { name: "Pedestal Down" },
+  { name: "Tracking Shot" },
+  { name: "Push-In" },
+  { name: "Pull-Out" },
+  { name: "Crane Up" },
+  { name: "Crane Down" },
+  { name: "Jib Shot" },
+  { name: "Steadicam" },
+  { name: "Handheld" },
+  { name: "Whip Pan" },
+  { name: "Arc Shot" },
+  { name: "360 Degree Shot" },
+  { name: "Orbit Shot" },
+  { name: "Zoom In" },
+  { name: "Zoom Out" },
+  { name: "Dolly Zoom (Vertigo Effect)" }
+];
+var camera_supports = [
+  { name: "Tripod" },
+  { name: "Monopod" },
+  { name: "Static Mount (Fixed Rig)" },
+  { name: "Handheld" },
+  { name: "Shoulder Rig" },
+  { name: "Steadicam" },
+  { name: "Gimbal" },
+  { name: "Dolly (On Track)" },
+  { name: "Dolly (Free / Floor)" },
+  { name: "Slider" },
+  { name: "Crane / Jib" },
+  { name: "Drone" },
+  { name: "Car Mount (Rig)" },
+  { name: "Body Mount" },
+  { name: "Cable Cam / Wire Cam" }
+];
+var lens_options = [
+  { name: "14mm", type: "Ultra Wide" },
+  { name: "18mm", type: "Ultra Wide" },
+  { name: "24mm", type: "Wide" },
+  { name: "28mm", type: "Wide" },
+  { name: "35mm", type: "Wide / Standard" },
+  { name: "50mm", type: "Standard" },
+  { name: "65mm", type: "Standard / Portrait" },
+  { name: "85mm", type: "Telephoto (Portrait)" },
+  { name: "100mm", type: "Telephoto" },
+  { name: "135mm", type: "Telephoto" },
+  { name: "200mm", type: "Long Telephoto" }
+];
+var aperture_options = [
+  { value: 1.3, label: "T1.3" },
+  { value: 1.4, label: "T1.4" },
+  { value: 1.5, label: "T1.5" },
+  { value: 1.8, label: "T1.8" },
+  { value: 2, label: "T2.0" },
+  { value: 2.2, label: "T2.2" },
+  { value: 2.8, label: "T2.8" },
+  { value: 3.1, label: "T3.1" },
+  { value: 4, label: "T4.0" },
+  { value: 4.5, label: "T4.5" },
+  { value: 5.6, label: "T5.6" },
+  { value: 6.3, label: "T6.3" },
+  { value: 8, label: "T8" },
+  { value: 9.5, label: "T9.5" },
+  { value: 11, label: "T11" },
+  { value: 13, label: "T13" },
+  { value: 16, label: "T16" },
+  { value: 22, label: "T22" }
+];
+var vfx_types = [
+  { name: "None" },
+  { name: "Green Screen (Chroma Key)" },
+  { name: "Blue Screen" },
+  { name: "Set Extension" },
+  { name: "Matte Painting" },
+  { name: "Full CGI Environment" },
+  { name: "CGI Character" },
+  { name: "CGI Props" },
+  { name: "Fire Simulation" },
+  { name: "Smoke / Fog Simulation" },
+  { name: "Water Simulation" },
+  { name: "Destruction Simulation" },
+  { name: "Digital Makeup / De-aging" },
+  { name: "Wire Removal" },
+  { name: "Object Removal" },
+  { name: "Crowd Duplication" },
+  { name: "Sky Replacement" },
+  { name: "Weather Enhancement" },
+  { name: "CG Lighting / Light Wrap" }
+];
+var fps_options = [
+  { value: "23.98", label: "23.98 fps" },
+  { value: "24", label: "24 fps" },
+  { value: "25", label: "25 fps" },
+  { value: "29.97", label: "29.97 fps" },
+  { value: "30", label: "30 fps" },
+  { value: "48", label: "48 fps" },
+  { value: "50", label: "50 fps" },
+  { value: "59.94", label: "59.94 fps" },
+  { value: "60", label: "60 fps" },
+  { value: "120", label: "120 fps (Slow Motion)" },
+  { value: "240", label: "240 fps (High Speed)" }
+];
+var scene_types = [
+  { name: "Action / Adventure" },
+  { name: "Comedy / Sitcom" },
+  { name: "Drama / Melodrama" },
+  { name: "Sci-Fi / Fantasy" },
+  { name: "Horror / Thriller" },
+  { name: "Suspense / Mystery" },
+  { name: "Sci-Fi Thriller / Suspense" },
+  { name: "Crime / Film Noir" },
+  { name: "Romance / Romantic Comedy" },
+  { name: "Musical / Dance" },
+  { name: "Documentary / Docudrama" },
+  { name: "Animation / Family" },
+  { name: "Western" },
+  { name: "War / Historical" },
+  { name: "Biographical (Biopic)" },
+  { name: "Psychological Thriller" },
+  { name: "Supernatural / Paranormal" },
+  { name: "Slasher / Gore" },
+  { name: "Dark Comedy / Satire" },
+  { name: "Parody / Spoof" },
+  { name: "Experimental / Avant-Garde" },
+  { name: "Music Video / Visual Arts" },
+  { name: "Instructional / Educational" }
+];
+var formSteps = [
+  {
+    id: 1,
+    name: "Core Identification",
+    icon: lucideReact.Info,
+    fields: ["priority", "shot_type", "camera_name"]
+  },
+  {
+    id: 2,
+    name: "Optics & Mechanics",
+    icon: lucideReact.Settings2,
+    fields: [
+      "camera_angle",
+      "camera_movement",
+      "camera_support",
+      "lens_mm",
+      "aperture",
+      "fps"
+    ]
+  },
+  {
+    id: 3,
+    name: "Visual Composition",
+    icon: lucideReact.Frame,
+    fields: ["subject", "duration_seconds", "framing", "depth_of_field"]
+  },
+  {
+    id: 4,
+    name: "Narrative Context",
+    icon: lucideReact.BookText,
+    fields: [
+      "action_blocking",
+      "emotional_purpose",
+      "edit_purpose",
+      "reason",
+      "lighting",
+      "sound",
+      "vfx"
+    ]
+  }
+];
+var AddShotForm = ({
+  userShotValue,
+  onSubmit,
+  cameras,
+  shots,
+  handleCloseModal,
+  parts
+}) => {
+  const initialShotValues = {
+    priority: "Essential",
+    shot_type: "",
+    framing: "",
+    camera_angle: "",
+    camera_movement: "",
+    camera_support: "",
+    lens_mm: "",
+    lens_feel: "",
+    aperture: "T2.8",
+    fps: "24",
+    depth_of_field: "",
+    subject: "",
+    action_blocking: "",
+    emotional_purpose: "",
+    lighting: "",
+    sound: "",
+    duration_seconds: 5,
+    edit_purpose: "",
+    reason: "",
+    vfx: "None",
+    camera_name: cameras.length === 1 ? cameras[0].name : ""
+  };
+  const ShotSchema = Yup__namespace.object().shape({
+    priority: Yup__namespace.string().required("Required"),
+    shot_type: Yup__namespace.string().required("Required"),
+    camera_angle: Yup__namespace.string().required("Required"),
+    camera_movement: Yup__namespace.string().required("Required"),
+    camera_support: Yup__namespace.string().required("Required"),
+    lens_mm: Yup__namespace.string().required("Required"),
+    aperture: Yup__namespace.string().required("Required"),
+    subject: Yup__namespace.string().required("Required"),
+    duration_seconds: Yup__namespace.number().min(0).required("Required"),
+    camera_name: Yup__namespace.string().required("Required")
+  });
+  const [step, setStep] = react.useState(1);
+  const [highestStep, setHighestStep] = react.useState(1);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    formik.Formik,
+    {
+      initialValues: userShotValue || initialShotValues,
+      validationSchema: ShotSchema,
+      onSubmit: (values, { setSubmitting }) => {
+        onSubmit(values);
+        setSubmitting(false);
+      },
+      children: ({
+        setFieldValue,
+        isSubmitting,
+        setTouched,
+        validateForm,
+        values,
+        submitForm
+      }) => {
+        const handleNext = async () => {
+          const errors = await validateForm();
+          const currentStepInfo = formSteps.find((s) => s.id === step);
+          if (!currentStepInfo) return;
+          const stepErrors = Object.keys(errors).filter(
+            (key) => currentStepInfo.fields.includes(key)
+          );
+          if (stepErrors.length === 0) {
+            setHighestStep((prev) => Math.max(prev, step + 1));
+            if (step < formSteps.length) {
+              setStep(step + 1);
+            } else {
+              await submitForm();
+            }
+          } else {
+            const touchedFields = currentStepInfo.fields.reduce(
+              (acc, field) => {
+                acc[field] = true;
+                return acc;
+              },
+              {}
+            );
+            setTouched(touchedFields, true);
+          }
+        };
+        const handleBack = () => {
+          setStep((s) => Math.max(s - 1, 1));
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: "flex flex-col overflow-hidden h-[90vh] lg:h-[85vh] bg-white rounded-b-3xl shadow-[0_12px_40px_-12px_rgba(0,0,0,0.15),_0_0_0_1px_rgba(0,0,0,0.05)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full lg:w-72 flex-shrink-0 border-b lg:border-b-0 lg:border-r border-slate-200 bg-white p-4 lg:p-8 flex flex-col z-10 relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "hidden lg:block text-[11px] font-semibold uppercase tracking-wider text-slate-400 mb-6 px-2", children: userShotValue ? "Update Shot" : "Create a Shot" }),
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-row lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-2 lg:pb-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: formSteps.map((formStep) => {
+                const isCurrent = step === formStep.id;
+                const isAccessible = formStep.id <= highestStep;
+                const isCompleted = formStep.id < highestStep;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !isAccessible,
+                    onClick: async () => {
+                      if (formStep.id !== step) {
+                        if (formStep.id < step) {
+                          setStep(formStep.id);
+                        } else {
+                          const errors = await validateForm();
+                          const currentStepInfo = formSteps.find(
+                            (s) => s.id === step
+                          );
+                          const stepErrors = currentStepInfo ? Object.keys(errors).filter(
+                            (key) => currentStepInfo.fields.includes(key)
+                          ) : [];
+                          if (stepErrors.length === 0) {
+                            setHighestStep(
+                              (prev) => Math.max(prev, step + 1)
+                            );
+                            setStep(formStep.id);
+                          } else {
+                            const touchedFields = currentStepInfo == null ? void 0 : currentStepInfo.fields.reduce(
+                              (acc, field) => {
+                                acc[field] = true;
+                                return acc;
+                              },
+                              {}
+                            );
+                            setTouched(touchedFields || {}, true);
+                          }
+                        }
+                      }
+                    },
+                    className: `group relative flex flex-shrink-0 items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-left w-auto lg:w-full
+                ${isCurrent ? "bg-slate-100 text-slate-900 font-semibold" : "text-slate-500"}
+                ${isAccessible && !isCurrent ? "hover:bg-slate-50 hover:text-slate-900 cursor-pointer" : ""}
+                ${!isAccessible ? "opacity-50 cursor-not-allowed" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: `flex items-center justify-center w-6 h-6 rounded-md transition-colors
+                  ${isCurrent ? "text-slate-900" : ""}
+                  ${isCompleted && !isCurrent ? "text-slate-400" : ""}
+                  ${!isCurrent && !isCompleted ? "text-slate-400 group-hover:text-slate-600" : ""}`,
+                          children: isCompleted && !isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 stroke-[2.5] text-slate-900" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                            formStep.icon,
+                            {
+                              className: `w-4 h-4 ${isCurrent ? "stroke-[2.5]" : "stroke-[2]"}`
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: `whitespace-nowrap ${isCurrent ? "font-semibold" : ""}`,
+                          children: formStep.name
+                        }
+                      )
+                    ]
+                  },
+                  formStep.id
+                );
+              }) }),
+              parts && parts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 lg:mt-6 pt-4 lg:pt-6 border-t border-slate-200 flex-1 flex flex-col min-h-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "hidden lg:block text-[11px] font-semibold text-slate-400 mb-3 uppercase tracking-wider px-2", children: "Scene Context" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto custom-scrollbar pr-2 -mr-2 max-h-24 lg:max-h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "text-[13px] text-slate-600 bg-slate-50 p-4 rounded-lg font-mono whitespace-pre-wrap leading-relaxed border border-slate-100",
+                    style: {
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+                    },
+                    children: parts.map((p) => p.text).join(" ")
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-4 sm:px-8 md:px-12 lg:px-16 pt-6 lg:pt-10 pb-24 lg:pb-12 custom-scrollbar bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", children: [
+              (() => {
+                const currentStepInfo = formSteps.find(
+                  (s) => s.id === step
+                );
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 lg:mb-10 text-left", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-block text-[11px] font-mono text-slate-400 uppercase tracking-widest mb-2", children: [
+                    "STEP ",
+                    step,
+                    " OF ",
+                    formSteps.length
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl lg:text-3xl font-semibold text-slate-900 tracking-tight", children: currentStepInfo == null ? void 0 : currentStepInfo.name }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-slate-500 mt-2 text-sm leading-relaxed max-w-xl", children: "Configure the necessary parameters for this shot sequence." })
+                ] });
+              })(),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 lg:space-y-10", children: [
+                step === 1 && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "animate-in fade-in slide-in-from-bottom-4 duration-500", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Shot Number",
+                      name: "shot_number",
+                      type: "number",
+                      readOnly: true,
+                      value: shots.length + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mb-1.5 text-sm font-medium text-slate-700 capitalize flex", children: [
+                      "Priority",
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AsteriskIcon, { className: "size-3 text-red-500" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center p-1 bg-slate-100 rounded-full ring-1 ring-inset ring-slate-200/50", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setFieldValue("priority", "Essential"),
+                          className: `w-full rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${values.priority === "Essential" ? "bg-white text-slate-900 shadow-sm ring-1 ring-slate-200/50" : "text-slate-500 hover:text-slate-900"}`,
+                          children: "Essential"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setFieldValue("priority", "Optional"),
+                          className: `w-full rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${values.priority === "Optional" ? "bg-white text-slate-900 shadow-sm ring-1 ring-slate-200/50" : "text-slate-500 hover:text-slate-900"}`,
+                          children: "Optional"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      formik.ErrorMessage,
+                      {
+                        name: "priority",
+                        className: "text-red-500 text-sm mt-1",
+                        component: "div"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Camera",
+                      name: "camera_name",
+                      selectedOption: "Select Camera",
+                      optionData: cameras,
+                      enableRedAsterick: true,
+                      value: values.camera_name,
+                      onChange: (e) => setFieldValue("camera_name", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Shot Type",
+                      name: "shot_type",
+                      selectedOption: "Select Shot Type",
+                      optionData: shot_types,
+                      enableRedAsterick: true,
+                      value: values.shot_type,
+                      onChange: (e) => setFieldValue("shot_type", e.target.value)
+                    }
+                  )
+                ] }) }),
+                step === 2 && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "animate-in fade-in slide-in-from-bottom-4 duration-500", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 lg:gap-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Camera Angle",
+                      name: "camera_angle",
+                      selectedOption: "Select Angle",
+                      optionData: camera_angles,
+                      enableRedAsterick: true,
+                      value: values.camera_angle,
+                      onChange: (e) => setFieldValue("camera_angle", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Camera Movement",
+                      name: "camera_movement",
+                      selectedOption: "Select Movement",
+                      optionData: camera_movements,
+                      enableRedAsterick: true,
+                      value: values.camera_movement,
+                      onChange: (e) => setFieldValue("camera_movement", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Camera Support",
+                      name: "camera_support",
+                      selectedOption: "Select Support",
+                      optionData: camera_supports,
+                      enableRedAsterick: true,
+                      value: values.camera_support,
+                      onChange: (e) => setFieldValue("camera_support", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Lens (mm)",
+                      name: "lens_mm",
+                      selectedOption: "Select Lens",
+                      optionData: lens_options,
+                      valueProperty: "name",
+                      enableRedAsterick: true,
+                      value: values.lens_mm,
+                      onChange: (e) => {
+                        const lensName = e.target.value;
+                        setFieldValue("lens_mm", lensName);
+                        const selectedLens = lens_options.find(
+                          (l) => l.name === lensName
+                        );
+                        if (selectedLens) {
+                          setFieldValue("lens_feel", selectedLens.type);
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Lens Feel",
+                      name: "lens_feel",
+                      type: "text",
+                      readOnly: true,
+                      placeholder: "e.g. Wide, Normal, Telephoto"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Aperture (T-Stop)",
+                      name: "aperture",
+                      selectedOption: "Select Aperture",
+                      optionData: aperture_options,
+                      valueProperty: "label",
+                      labelProperty: "label",
+                      enableRedAsterick: true,
+                      value: values.aperture,
+                      onChange: (e) => setFieldValue("aperture", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikSelect,
+                    {
+                      label: "Frame Rate (FPS)",
+                      name: "fps",
+                      selectedOption: "Select FPS",
+                      optionData: fps_options,
+                      valueProperty: "value",
+                      labelProperty: "label",
+                      enableRedAsterick: true,
+                      value: values.fps,
+                      onChange: (e) => setFieldValue("fps", e.target.value)
+                    }
+                  )
+                ] }) }),
+                step === 3 && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "animate-in fade-in slide-in-from-bottom-4 duration-500", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 lg:gap-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Subject",
+                      name: "subject",
+                      type: "text",
+                      placeholder: "e.g. John, The Car",
+                      enableRedAsterick: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Framing",
+                      name: "framing",
+                      type: "text",
+                      placeholder: "e.g. Over-the-shoulder"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Depth of Field",
+                      name: "depth_of_field",
+                      type: "text",
+                      placeholder: "e.g. Shallow, Deep"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FormikInput,
+                    {
+                      label: "Duration (seconds)",
+                      name: "duration_seconds",
+                      type: "number",
+                      min: 0,
+                      enableRedAsterick: true
+                    }
+                  )
+                ] }) }),
+                step === 4 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "animate-in fade-in slide-in-from-bottom-4 duration-500 space-y-6 lg:space-y-10", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FormikInput,
+                      {
+                        label: "Lighting",
+                        name: "lighting",
+                        type: "text",
+                        placeholder: "e.g. High-key"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FormikInput,
+                      {
+                        label: "Sound",
+                        name: "sound",
+                        type: "text",
+                        placeholder: "e.g. Dialogue"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FormikSelect,
+                      {
+                        label: "VFX",
+                        name: "vfx",
+                        selectedOption: "Select VFX",
+                        optionData: vfx_types,
+                        value: values.vfx,
+                        onChange: (e) => setFieldValue("vfx", e.target.value)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 lg:space-y-10", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FormikTextarea,
+                      {
+                        label: "Action / Blocking",
+                        name: "action_blocking",
+                        placeholder: "Key character movements and staging..."
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FormikTextarea,
+                      {
+                        label: "Emotional Purpose",
+                        name: "emotional_purpose",
+                        placeholder: "What is the intended emotional impact on the audience?"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 lg:gap-8", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormikTextarea,
+                        {
+                          label: "Edit Purpose",
+                          name: "edit_purpose",
+                          placeholder: "How does this shot fit into the edit?"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormikTextarea,
+                        {
+                          label: "Reason",
+                          name: "reason",
+                          placeholder: "Why is this shot necessary for the story?"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky bottom-0  border-t border-slate-200 px-6 lg:px-12 py-4 lg:py-5 flex justify-between items-center z-10 rounded-b-xl lg:rounded-2xl", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: step > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleBack,
+                className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors rounded-md hover:bg-slate-50",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2190" }),
+                  " Back"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCloseModal,
+                  className: "px-4 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 rounded-md hover:bg-slate-50 transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              step !== 4 ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleNext,
+                  className: `bg-blumine-600 rounded-full inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm md:text-lg font-medium text-white shadow-md transition-all duration-300  ease-in-out hover:bg-opacity-70 hover:shadow-lg hover:shadow-blumine-600/50 focus:outline-hidden focus:ring-2 focus:ring-blumine-600 focus:ring-opacity-50 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:bg-blumine-600 disabled:hover:shadow-md cursor-pointer!`,
+                  children: "Next Step"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleNext,
+                  disabled: isSubmitting,
+                  className: `bg-blumine-600 rounded-full inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm md:text-lg font-medium text-white shadow-md transition-all duration-300  ease-in-out hover:bg-opacity-70 hover:shadow-lg hover:shadow-blumine-600/50 focus:outline-hidden focus:ring-2 focus:ring-blumine-600 focus:ring-opacity-50 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:bg-blumine-600 disabled:hover:shadow-md cursor-pointer!`,
+                  children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    "Processing..."
+                  ] }) : userShotValue ? "Save Changes" : "Create Shot"
+                }
+              )
+            ] })
+          ] })
+        ] });
+      }
+    }
+  );
+};
+var add_shot_modal_default = AddShotForm;
+var ProductionSetupModal = ({
+  initializeProduction,
+  initialValues
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[80vh] flex items-center justify-center px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl font-semibold text-slate-900 tracking-tight", children: "Production Setup for this Scene" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 mt-2", children: "Configure your scene and camera setup to get started" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 md:p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      formik.Formik,
+      {
+        initialValues: initialValues || { numCameras: 1, scene_type: "" },
+        validationSchema: Yup__namespace.object({
+          numCameras: Yup__namespace.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__namespace.string().required("Scene type is required")
+        }),
+        onSubmit: (values) => {
+          initializeProduction(values.numCameras, values.scene_type);
+        },
+        children: ({ isSubmitting, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormikSelect,
+              {
+                label: "Scene Type",
+                name: "scene_type",
+                selectedOption: "Select scene type",
+                optionData: scene_types,
+                enableRedAsterick: true,
+                onChange: (e) => setFieldValue("scene_type", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormikInput,
+              {
+                label: "Number of Cameras",
+                name: "numCameras",
+                type: "number",
+                min: 1,
+                max: 20,
+                enableRedAsterick: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 bg-slate-50 border border-slate-100 p-4 rounded-xl", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-5 h-5 text-slate-400 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[13px] text-slate-600 leading-relaxed", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-slate-900", children: "Important:" }),
+              " ",
+              "These settings are permanent. Once the production is initialized for this scene, you won't be able to change the scene type or camera count."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isSubmitting,
+              className: "w-full h-11 rounded-3xl bg-blumine-600 text-white text-sm md:text-base font-medium shadow-sm transition-all duration-300 hover:bg-blumine-700 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blumine-600/40 disabled:opacity-60 disabled:cursor-not-allowed",
+              children: isSubmitting ? "Initializing..." : "Complete Setup"
+            }
+          ) })
+        ] })
+      }
+    ) })
+  ] }) });
+};
+var production_setup_modal_default = ProductionSetupModal;
+function ViewShotModal({ shot }) {
+  const PropertyRow = ({ icon: Icon, label, value }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 py-1.5 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 w-32 shrink-0 text-slate-500 mt-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Icon,
+        {
+          className: "w-4 h-4 text-slate-400 group-hover:text-slate-600 transition-colors",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium", children: label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-medium text-slate-900 flex-1 break-words whitespace-pre-wrap leading-relaxed", children: value || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 italic font-normal", children: "Unspecified" }) })
+  ] });
+  const DescriptionBlock = ({ icon: Icon, label, value }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 md:gap-6 mb-12 sm:mb-10 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-1 hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-50 border border-slate-100", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 text-[#15607b]/70" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 flex-1 w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:hidden mb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 text-[#15607b]/70" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[13px] font-bold uppercase tracking-wider text-[#15607b]", children: label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "hidden sm:block text-[14px] font-semibold text-slate-900", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] leading-[1.8] text-slate-600 font-normal whitespace-pre-wrap", children: value || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 italic", children: "No description provided." }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row bg-white max-h-[85vh] rounded-b-[2.5rem] overflow-y-auto w-full custom-scrollbar relative items-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-6 sm:p-8 md:p-12 w-full min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto lg:mx-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center justify-center bg-slate-50 text-slate-400 font-mono text-[12px] font-semibold px-2 py-1 rounded-[2.5rem] border border-slate-200/60 shadow-sm", children: [
+            "SH-",
+            shot.shot_number.toString().padStart(3, "0")
+          ] }),
+          shot.shot_type && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 bg-blumine-50 border border-blumine-400 px-3 py-1 rounded-[2.5rem] text-blumine-500 shadow-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-bold uppercase tracking-widest opacity-90", children: "Shot Type:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-bold tracking-wide", children: shot.shot_type })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col mt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold uppercase tracking-widest text-blumine-700 mb-2", children: "Subject" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl font-semibold text-slate-900 tracking-tight break-words", children: shot.subject || "No Subject Defined" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DescriptionBlock,
+          {
+            icon: lucideReact.AlignLeft,
+            label: "Action & Blocking",
+            value: shot.action_blocking
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DescriptionBlock,
+          {
+            icon: lucideReact.Target,
+            label: "Reasoning & Importance",
+            value: shot.reason
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DescriptionBlock,
+          {
+            icon: lucideReact.Activity,
+            label: "Emotional Intent",
+            value: shot.emotional_purpose
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DescriptionBlock,
+          {
+            icon: lucideReact.MonitorPlay,
+            label: "Editorial Role",
+            value: shot.edit_purpose
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full lg:w-[340px] xl:w-[380px] shrink-0 bg-[#fdfdfd] border-t lg:border-t-0 lg:border-l border-slate-200/60 p-6 sm:p-8 pb-12 lg:pb-8 h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 mb-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[11px] font-bold uppercase tracking-widest text-blumine-700 mb-4 ml-1", children: "Core Identity" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PropertyRow,
+          {
+            icon: lucideReact.Clapperboard,
+            label: "Shot Type",
+            value: shot.shot_type
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PropertyRow,
+          {
+            icon: lucideReact.Target,
+            label: "Priority",
+            value: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `inline-flex items-center rounded-[2.5rem] px-2 py-0.5 text-[11px] font-bold tracking-wide ${shot.priority === "Essential" ? "bg-green-50 text-green-700 border border-green-200/60" : "bg-orange-100 text-orange-600 border border-orange-200/60"}`,
+                children: shot.priority
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Crosshair, label: "Subject", value: shot.subject }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PropertyRow,
+          {
+            icon: lucideReact.Clock,
+            label: "Duration",
+            value: shot.duration_seconds ? `${shot.duration_seconds}` : null
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Video, label: "Shot Type", value: shot.shot_type })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-px bg-slate-100 mb-8 mt-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row lg:flex-col gap-10 lg:gap-8 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[11px] font-bold uppercase tracking-widest text-[#15607b] mb-5 ml-1", children: "Optics & Gear" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Camera,
+                label: "Camera",
+                value: shot.camera_name
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Aperture,
+                label: "Lens MM",
+                value: shot.lens_mm
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.SlidersHorizontal,
+                label: "Aperture",
+                value: shot.aperture
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Frame,
+                label: "Support",
+                value: shot.camera_support
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Clock,
+                label: "Frame Rate",
+                value: shot.fps ? `${shot.fps} fps` : null
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Frame,
+                label: "Angle",
+                value: shot.camera_angle
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Frame,
+                label: "Movement",
+                value: shot.camera_movement
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[11px] font-bold uppercase tracking-widest text-[#15607b] mb-5 ml-1", children: "Visual Profile" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Frame, label: "Framing", value: shot.framing }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyRow,
+              {
+                icon: lucideReact.Aperture,
+                label: "Depth Field",
+                value: shot.depth_of_field
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Sun, label: "Lighting", value: shot.lighting }),
+            /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Wand2, label: "VFX", value: shot.vfx }),
+            /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { icon: lucideReact.Volume2, label: "Sound", value: shot.sound })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ShotBreakdownView({
+  blocks,
+  isLoading,
+  shots,
+  selectionMenu,
+  handleMouseUp,
+  addShot,
+  updateShot,
+  clearSelection,
+  menuRef,
+  cameras,
+  sceneType,
+  initializeProduction
+}) {
+  var _a, _b, _c;
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
+  const containerRef = react.useRef(null);
+  const [isSidebarOpen, setIsSidebarOpen] = react.useState(false);
+  const [toggledShotId, setToggledShotId] = react.useState(
+    null
+  );
+  const [viewingShotId, setViewingShotId] = react.useState(
+    null
+  );
+  const [updatingShotId, setUpdatingShotId] = react.useState(
+    null
+  );
+  const [isInitModalOpen, setIsInitModalOpen] = react.useState(false);
+  const handleCloseModal = () => {
+    clearSelection();
+  };
+  const renderBlockText = (block) => {
+    if (!toggledShotId) return block.text;
+    const toggledShot = shots.find((s) => s.id === toggledShotId);
+    if (!toggledShot) return block.text;
+    const blockShotParts = toggledShot.parts.filter((p) => p.block_id === block.id).sort((a, b) => a.start_index - b.start_index);
+    if (blockShotParts.length === 0) return block.text;
+    const nodes = [];
+    let currentIndex = 0;
+    blockShotParts.forEach((part, index) => {
+      const actualStart = Math.max(part.start_index, currentIndex);
+      if (actualStart > currentIndex) {
+        nodes.push(
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex, actualStart) }, `text-${currentIndex}`)
+        );
+      }
+      if (actualStart < part.end_index) {
+        nodes.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                // Balanced marker gradient using blumine-200 and blumine-300 tones
+                backgroundImage: "linear-gradient(104deg, transparent 0.5%, rgba(176, 227, 241, 0.7) 2%, rgba(122, 206, 230, 0.8) 5%, rgba(176, 227, 241, 0.7) 95%, transparent 99%)",
+                // Tidy but still slightly organic marker edges
+                borderRadius: "6px 2px 5px 3px / 2px 6px 3px 5px",
+                // Clone decoration across line breaks for multi-line seamlessness
+                boxDecorationBreak: "clone",
+                WebkitBoxDecorationBreak: "clone",
+                // Tighter bleed so it looks "proper" and less messy
+                padding: "0.15em 0.25em",
+                margin: "0 -0.15em"
+              },
+              children: block.text.slice(actualStart, part.end_index)
+            },
+            `shot-${toggledShot.id}-${index}`
+          )
+        );
+      }
+      currentIndex = Math.max(currentIndex, part.end_index);
+    });
+    if (currentIndex < block.text.length) {
+      nodes.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
+      );
+    }
+    return nodes;
+  };
+  react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8 xl:pr-[20rem]",
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center max-w-6xl xl:max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 min-h-screen", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "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)
+              },
+              block.id
+            ))
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-6 w-6" }),
+              shots.length > 0 && /* @__PURE__ */ jsxRuntime.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: shots.length })
+            ]
+          }
+        ),
+        isSidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
+            onClick: () => setIsSidebarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("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: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between mb-2 shrink-0 px-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md border border-slate-200 bg-slate-50 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-3.5 w-3.5 text-slate-700" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[11px] font-bold uppercase tracking-widest text-slate-800", children: "Shots" }),
+                    sceneType && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold text-[#15607b] uppercase tracking-tighter opacity-80 mt-0.5", children: sceneType })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  cameras.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setIsInitModalOpen(true),
+                      className: "flex h-7 w-7 items-center justify-center rounded-md border border-slate-200 bg-white shadow-sm transition-colors hover:bg-slate-50",
+                      title: "Project Setup",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-3.5 w-3.5 text-slate-600" })
+                    }
+                  ),
+                  shots.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-600 shadow-sm", children: shots.length })
+                ] })
+              ] }),
+              cameras.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 px-1 mb-6 mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 text-[9px] font-bold uppercase tracking-widest bg-slate-100 text-slate-500 px-2 py-1 rounded-md border border-slate-200/50", children: [
+                cameras.length,
+                " Multi-Cam Setup"
+              ] }) }),
+              shots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-slate-50 border border-slate-100 mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-4 w-4 text-slate-300" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-slate-700", children: "No shots created" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-slate-500 mt-1 max-w-[160px] leading-relaxed", children: "Highlight text in the screenplay to add your first shot." })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2.5 overflow-y-auto overflow-x-hidden pb-4 pr-2 custom-scrollbar", children: shots.map((shot) => {
+                const isActive = toggledShotId === shot.id;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    onClick: () => {
+                      var _a2;
+                      return setToggledShotId(isActive ? null : (_a2 = shot.id) != null ? _a2 : null);
+                    },
+                    className: `group relative flex flex-col cursor-pointer gap-2 overflow-hidden rounded-lg border px-3.5 py-3 transition-colors duration-200 ${isActive ? "border-slate-800 bg-slate-50 shadow-[0_2px_8px_rgba(0,0,0,0.04)]" : "border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50/50"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: `text-xs font-semibold ${isActive ? "text-slate-900" : "text-slate-700"}`,
+                            children: [
+                              "Shot ",
+                              shot.shot_number
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: `rounded-md px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${isActive ? "bg-slate-200 text-slate-800" : "bg-slate-100 text-slate-500"}`,
+                            children: shot.shot_type
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-medium text-slate-500 truncate", children: [
+                        shot.camera_name,
+                        " \u2022 ",
+                        shot.lens_mm
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: `grid grid-rows-[0fr] transition-all duration-300 ease-in-out ${isActive ? "grid-rows-[1fr] mt-0.5" : ""}`,
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-2 border-t border-slate-200/60 mt-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  var _a2;
+                                  e.stopPropagation();
+                                  setViewingShotId((_a2 = shot.id) != null ? _a2 : null);
+                                },
+                                className: "flex flex-1 items-center justify-center gap-1.5 rounded-md border border-slate-200 bg-white py-1.5 text-[10px] font-bold text-slate-700 shadow-sm transition-colors hover:bg-slate-50 hover:text-slate-900",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-3 w-3" }),
+                                  "View"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  var _a2;
+                                  e.stopPropagation();
+                                  setUpdatingShotId((_a2 = shot.id) != null ? _a2 : null);
+                                },
+                                className: "flex flex-1 items-center justify-center gap-1.5 rounded-md bg-slate-900 py-1.5 text-[10px] font-bold text-white shadow-sm transition-colors hover:bg-slate-800",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3 w-3" }),
+                                  "Edit"
+                                ]
+                              }
+                            )
+                          ] }) })
+                        }
+                      )
+                    ]
+                  },
+                  shot.id
+                );
+              }) })
+            ] }) })
+          }
+        ),
+        selectionMenu && /* @__PURE__ */ jsxRuntime.jsx(
+          modal_layout_default,
+          {
+            onClose: handleCloseModal,
+            title: cameras.length === 0 ? "Production Setup" : "Add New Shot",
+            menuRef,
+            maxWidth: cameras.length === 0 ? "max-w-lg" : "max-w-7xl",
+            children: cameras.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(production_setup_modal_default, { initializeProduction }) : /* @__PURE__ */ jsxRuntime.jsx(
+              add_shot_modal_default,
+              {
+                onSubmit: (values) => {
+                  addShot(values);
+                  handleCloseModal();
+                },
+                cameras,
+                shots,
+                handleCloseModal,
+                parts: selectionMenu.parts
+              }
+            )
+          }
+        ),
+        isInitModalOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          modal_layout_default,
+          {
+            onClose: () => setIsInitModalOpen(false),
+            title: "Production Setup",
+            maxWidth: "max-w-lg",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              production_setup_modal_default,
+              {
+                initializeProduction: (count, type) => {
+                  initializeProduction(count, type);
+                  setIsInitModalOpen(false);
+                },
+                initialValues: {
+                  numCameras: cameras.length || 1,
+                  scene_type: sceneType
+                }
+              }
+            )
+          }
+        ),
+        viewingShotId && /* @__PURE__ */ jsxRuntime.jsx(
+          modal_layout_default,
+          {
+            onClose: () => setViewingShotId(null),
+            title: `Shot ${((_a = shots.find((s) => s.id === viewingShotId)) == null ? void 0 : _a.shot_number) || ""} Details`,
+            maxWidth: "max-w-5xl",
+            children: shots.find((s) => s.id === viewingShotId) && /* @__PURE__ */ jsxRuntime.jsx(ViewShotModal, { shot: shots.find((s) => s.id === viewingShotId) })
+          }
+        ),
+        updatingShotId && /* @__PURE__ */ jsxRuntime.jsx(
+          modal_layout_default,
+          {
+            onClose: () => setUpdatingShotId(null),
+            title: `Update Shot SH-${((_c = (_b = shots.find((s) => s.id === updatingShotId)) == null ? void 0 : _b.shot_number) == null ? void 0 : _c.toString().padStart(3, "0")) || ""}`,
+            maxWidth: "max-w-7xl",
+            children: shots.find((s) => s.id === updatingShotId) && /* @__PURE__ */ jsxRuntime.jsx(
+              add_shot_modal_default,
+              {
+                parts: shots.find((s) => s.id === updatingShotId).parts,
+                cameras,
+                shots,
+                handleCloseModal: () => setUpdatingShotId(null),
+                userShotValue: shots.find((s) => s.id === updatingShotId),
+                onSubmit: (values) => {
+                  updateShot(updatingShotId, values);
+                  setUpdatingShotId(null);
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function useShotBreakdownScene(options) {
+  const [shots, setShots] = react.useState(options.preLoadedShots || []);
+  const [cameras, setCameras] = react.useState(
+    options.preloadedCameras || []
+  );
+  const [sceneType, setSceneType] = react.useState(
+    options.preloadedSceneType || ""
+  );
+  const [scene, setScene] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  const [selectionMenu, setSelectionMenu] = react.useState(null);
+  const menuRef = react.useRef(null);
+  react.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);
+        }
+        setIsLoading(false);
+      } catch (error2) {
+        setError(true);
+        setIsLoading(false);
+        console.error("Error fetching scene:", error2);
+      }
+    };
+    fetchScene();
+  }, []);
+  const blocks = react.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 idAttr = div.getAttribute("id");
+      const blockId = idAttr && idAttr.startsWith("par") ? idAttr.substring(3) : idAttr || uuid();
+      parsedBlocks.push({ id: blockId, type, text: divText });
+    });
+    return parsedBlocks;
+  }, [scene]);
+  const clearSelection = () => {
+    var _a;
+    setSelectionMenu(null);
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+  };
+  react.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        clearSelection();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const getAbsoluteOffset = (blockEl, targetNode, targetOffset) => {
+    var _a;
+    let currentOffset = 0;
+    const walker = document.createTreeWalker(
+      blockEl,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+      if (currentNode === targetNode) {
+        return currentOffset + targetOffset;
+      }
+      currentOffset += ((_a = currentNode.nodeValue) == null ? void 0 : _a.length) || 0;
+      currentNode = walker.nextNode();
+    }
+    return targetOffset;
+  };
+  const handleMouseUp = () => {
+    var _a, _b;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const startNode = range.startContainer;
+    const endNode = range.endContainer;
+    const startBlockEl = startNode.nodeType === Node.TEXT_NODE ? (_a = startNode.parentElement) == null ? void 0 : _a.closest("[data-block-id]") : startNode.closest("[data-block-id]");
+    const endBlockEl = endNode.nodeType === Node.TEXT_NODE ? (_b = endNode.parentElement) == null ? void 0 : _b.closest("[data-block-id]") : endNode.closest("[data-block-id]");
+    if (!startBlockEl || !endBlockEl) return;
+    const startBlockId = startBlockEl.getAttribute("data-block-id");
+    const endBlockId = endBlockEl.getAttribute("data-block-id");
+    const startIndexInArray = blocks.findIndex((b) => b.id === startBlockId);
+    const endIndexInArray = blocks.findIndex((b) => b.id === endBlockId);
+    if (startIndexInArray === -1 || endIndexInArray === -1) return;
+    const startAbsOffset = getAbsoluteOffset(
+      startBlockEl,
+      startNode,
+      range.startOffset
+    );
+    const endAbsOffset = getAbsoluteOffset(
+      endBlockEl,
+      endNode,
+      range.endOffset
+    );
+    const selectedParts = [];
+    for (let i = startIndexInArray; i <= endIndexInArray; i++) {
+      const block = blocks[i];
+      const start = i === startIndexInArray ? startAbsOffset : 0;
+      const end = i === endIndexInArray ? endAbsOffset : block.text.length;
+      if (start !== end) {
+        selectedParts.push({
+          block_id: block.id,
+          start_index: start,
+          end_index: end,
+          text: block.text.slice(start, end)
+        });
+      }
+    }
+    if (selectedParts.length > 0) {
+      const rect = range.getBoundingClientRect();
+      setSelectionMenu({
+        top: rect.top + window.scrollY,
+        left: rect.left + rect.width / 2 + window.scrollX,
+        parts: selectedParts
+      });
+    }
+  };
+  const initializeProduction = (count, type) => {
+    var _a;
+    const newCameras = [];
+    for (let i = 1; i <= count; i++) {
+      newCameras.push({ name: `Camera ${String.fromCharCode(64 + i)}` });
+    }
+    setCameras(newCameras);
+    setSceneType(type);
+    (_a = options.onProductionInitialized) == null ? void 0 : _a.call(options, newCameras, type);
+  };
+  const addShot = (shotDetails) => {
+    var _a;
+    if (!selectionMenu) return;
+    const newShot = __spreadProps(__spreadValues({}, shotDetails), {
+      id: uuid(),
+      shot_number: shots.length + 1,
+      parts: selectionMenu.parts
+    });
+    setShots((prev) => [...prev, newShot]);
+    (_a = options.onShotAdded) == null ? void 0 : _a.call(options, newShot);
+    clearSelection();
+  };
+  const updateShot = (shotId, updatedDetails) => {
+    setShots(
+      (prev) => prev.map((shot) => {
+        var _a;
+        if (shot.id === shotId) {
+          const fullUpdated = __spreadValues(__spreadValues({}, shot), updatedDetails);
+          (_a = options.onShotUpdated) == null ? void 0 : _a.call(options, shotId, fullUpdated);
+          return fullUpdated;
+        }
+        return shot;
+      })
+    );
+  };
+  return {
+    blocks,
+    isLoading,
+    error,
+    shots,
+    sceneType,
+    selectionMenu,
+    handleMouseUp,
+    cameras,
+    initializeProduction,
+    addShot,
+    updateShot,
+    clearSelection,
+    menuRef
+  };
+}
 
 exports.CATEGORIES = CATEGORIES;
 exports.ScreenplayEditorView = ScreenplayEditorView;
 exports.ScriptBreakdownSceneView = ScriptBreakdownSceneView;
+exports.ShotBreakdownView = ShotBreakdownView;
+exports.aperture_options = aperture_options;
 exports.blockStyles = blockStyles;
 exports.blockTypes = blockTypes;
+exports.camera_angles = camera_angles;
+exports.camera_movements = camera_movements;
+exports.camera_supports = camera_supports;
 exports.convertBlocksToSbx = convertBlocksToSbx;
+exports.fps_options = fps_options;
 exports.handleSaveAsPdf = handleSaveAsPdf;
 exports.handleSyncWithCloud = handleSyncWithCloud;
 exports.icons = icons;
+exports.lens_options = lens_options;
+exports.scene_types = scene_types;
+exports.shot_types = shot_types;
 exports.timeOfDayOptions = timeOfDayOptions;
 exports.useScreenplayEditor = useScreenplayEditor;
 exports.useScriptBreakdownScene = useScriptBreakdownScene;
+exports.useShotBreakdownScene = useShotBreakdownScene;
 exports.uuid = uuid;
+exports.vfx_types = vfx_types;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map