@vishu1301/script-writing 0.1.1

package/dist/index.js

@@ -0,0 +1,970 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// app/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ScreenplayEditorView: () => ScreenplayEditorView,
+  blockStyles: () => blockStyles,
+  blockTypes: () => blockTypes,
+  icons: () => icons,
+  timeOfDayOptions: () => timeOfDayOptions,
+  useScreenplayEditor: () => useScreenplayEditor,
+  uuid: () => uuid
+});
+module.exports = __toCommonJS(index_exports);
+
+// app/view/screenplay-editor.view.tsx
+var import_react = require("react");
+
+// app/types/screenplay-editor.types.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var timeOfDayOptions = ["DAY", "NIGHT"];
+var blockTypes = [
+  "SCENE_HEADING",
+  "ACTION",
+  "CHARACTER",
+  "PARENTHETICAL",
+  "DIALOGUE",
+  "TRANSITION"
+];
+var uuid = () => Math.random().toString(36).slice(2, 9);
+var icons = {
+  SCENE_HEADING: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Clapperboard, { className: "w-5 h-5" }),
+  ACTION: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Sparkles, { className: "w-5 h-5" }),
+  CHARACTER: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "w-5 h-5" }),
+  PARENTHETICAL: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Brackets, { className: "w-5 h-5" }),
+  DIALOGUE: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageCircle, { className: "w-5 h-5" }),
+  TRANSITION: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRightLeft, { className: "w-5 h-5" })
+};
+var blockStyles = {
+  SCENE_HEADING: {
+    label: "Scene Heading",
+    className: "uppercase font-bold text-zinc-900 flex items-center gap-3",
+    inputStyle: {
+      textTransform: "uppercase",
+      fontWeight: 700,
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word"
+    }
+  },
+  ACTION: {
+    label: "Action",
+    className: "text-zinc-800 leading-relaxed",
+    inputStyle: {
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word",
+      lineHeight: 1.7
+    }
+  },
+  CHARACTER: {
+    label: "Character",
+    className: "uppercase font-bold text-center text-zinc-900 tracking-widest",
+    inputStyle: {
+      textTransform: "uppercase",
+      textAlign: "center",
+      fontWeight: 700,
+      letterSpacing: "0.1em",
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word"
+    }
+  },
+  PARENTHETICAL: {
+    label: "Parenthetical",
+    className: "text-center text-zinc-600",
+    inputStyle: {
+      fontStyle: "normal",
+      maxWidth: "20rem",
+      margin: "0 auto",
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word",
+      textAlign: "center"
+    }
+  },
+  DIALOGUE: {
+    label: "Dialogue",
+    className: "text-zinc-900 leading-relaxed max-w-[30rem] mx-auto",
+    inputStyle: {
+      marginLeft: "auto",
+      marginRight: "auto",
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word",
+      fontSize: "1.05rem",
+      textAlign: "left",
+      lineHeight: 1.7
+    }
+  },
+  TRANSITION: {
+    label: "Transition",
+    className: "uppercase font-bold text-right text-zinc-900",
+    inputStyle: {
+      textTransform: "uppercase",
+      fontWeight: 600,
+      textAlign: "right",
+      outline: "none",
+      whiteSpace: "pre-wrap",
+      overflowWrap: "break-word",
+      wordBreak: "break-word"
+    }
+  }
+};
+
+// app/view/screenplay-editor.view.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ScreenplayEditorView({
+  blocks,
+  pages,
+  isPageSplitEnabled,
+  togglePageSplit,
+  refs,
+  focusedBlockId,
+  showSuggestions,
+  locations,
+  characters,
+  sceneNumbers,
+  handleBlockTextChange,
+  handleSceneTypeChange,
+  handleTimeOfDayChange,
+  handleBlockTypeChange,
+  handleKeyDown,
+  handleFocus,
+  handleBlur,
+  onSave,
+  onSaveAsPdf,
+  onSyncWithCloud
+}) {
+  const [isRulesOpen, setIsRulesOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 max-w-fit p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar", children: blockTypes.map((type) => {
+      var _a;
+      const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
+          onClick: () => handleBlockTypeChange(type),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: "blockType",
+                id: `block-type-${type}`,
+                className: "sr-only",
+                "aria-label": blockStyles[type].label,
+                checked: selected,
+                readOnly: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "label",
+              {
+                htmlFor: `block-type-${type}`,
+                className: "flex items-center gap-2 cursor-pointer",
+                children: [
+                  icons[type],
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
+                ]
+              }
+            )
+          ]
+        },
+        type
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: pages.map((pageBlocks, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 ring-1 ring-zinc-200/50 rounded-sm md:rounded-md p-16 md:p-20 flex flex-col w-[210mm] min-h-[297mm] shrink-0",
+        style: {
+          fontFamily: "var(--font-courier-prime, 'Courier New', Courier, monospace)"
+        },
+        children: [
+          pageBlocks.map((block) => {
+            var _a, _b;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                "data-block-id": block.id,
+                className: `relative rounded-sm transition-all duration-200 outline-none ${focusedBlockId === block.id ? "bg-zinc-100/50" : "bg-transparent"}`,
+                children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none", children: String(sceneNumbers[block.id] || 0) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "select",
+                      {
+                        className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer w-fit transition-colors",
+                        "aria-label": "Scene Type",
+                        value: (_a = block.sceneType) != null ? _a : "INT.",
+                        onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { children: "INT." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { children: "EXT." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { children: "INT/EXT." })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        ref: (el) => {
+                          if (!el) return;
+                          refs.current[block.id] = el;
+                        },
+                        contentEditable: true,
+                        suppressContentEditableWarning: true,
+                        "aria-label": `Scene Heading: ${block.text}`,
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": focusedBlockId === block.id && showSuggestions && locations.length > 0,
+                        spellCheck: false,
+                        className: "min-w-[5rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
+                        onInput: (e) => handleBlockTextChange(
+                          block.id,
+                          e.target.innerText
+                        ),
+                        onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
+                        onFocus: () => handleFocus(block.id),
+                        onBlur: () => handleBlur(block.id)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "select",
+                      {
+                        className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer transition-colors",
+                        "aria-label": "Time of Day",
+                        value: (_b = block.timeOfDay) != null ? _b : "DAY",
+                        onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
+                        children: timeOfDayOptions.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { children: t }, t))
+                      }
+                    )
+                  ] }),
+                  focusedBlockId === block.id && showSuggestions && locations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      role: "listbox",
+                      id: `suggestions-${block.id}`,
+                      className: "absolute top-[calc(100%+6px)] left-0 min-w-[240px] z-50 bg-white border border-slate-200/80 shadow-xl shadow-slate-200/40 rounded-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-150",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
+                        (loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
+                      ).map((loc) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "div",
+                        {
+                          role: "option",
+                          className: "group flex items-center justify-between px-4 py-2.5 cursor-pointer transition-all duration-150 hover:bg-slate-50 active:bg-slate-100",
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            const element = refs.current[block.id];
+                            if (element) {
+                              element.innerText = loc;
+                              handleBlockTextChange(block.id, loc);
+                              element.focus();
+                              const range = document.createRange();
+                              const sel = window.getSelection();
+                              range.selectNodeContents(element);
+                              range.collapse(false);
+                              sel == null ? void 0 : sel.removeAllRanges();
+                              sel == null ? void 0 : sel.addRange(range);
+                            }
+                            handleBlur(block.id);
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ArrowRight, { className: "w-3.5 h-3.5 text-slate-300 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" })
+                          ]
+                        },
+                        loc
+                      )) })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      ref: (el) => {
+                        if (!el) return;
+                        refs.current[block.id] = el;
+                      },
+                      contentEditable: true,
+                      suppressContentEditableWarning: true,
+                      "aria-label": `${blockStyles[block.type].label} text`,
+                      "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
+                      spellCheck: false,
+                      className: `block outline-none w-full min-h-[2.5rem] px-4 py-2 break-words ${blockStyles[block.type].className}`,
+                      onInput: (e) => handleBlockTextChange(
+                        block.id,
+                        e.target.innerText
+                      ),
+                      onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
+                      onFocus: () => handleFocus(block.id),
+                      onBlur: () => handleBlur(block.id),
+                      style: blockStyles[block.type].inputStyle
+                    }
+                  ),
+                  focusedBlockId === block.id && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      role: "listbox",
+                      id: `suggestions-${block.id}`,
+                      className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
+                        (char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
+                      ).map((char) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "div",
+                        {
+                          role: "option",
+                          className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            const element = refs.current[block.id];
+                            if (element) {
+                              element.innerText = char;
+                              handleBlockTextChange(block.id, char);
+                              element.focus();
+                              const range = document.createRange();
+                              const sel = window.getSelection();
+                              range.selectNodeContents(element);
+                              range.collapse(false);
+                              sel == null ? void 0 : sel.removeAllRanges();
+                              sel == null ? void 0 : sel.addRange(range);
+                            }
+                            handleBlur(block.id);
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-sky-500 transition-colors mr-3" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
+                          ]
+                        },
+                        char
+                      )) })
+                    }
+                  )
+                ] })
+              },
+              block.id + "-" + block.type
+            );
+          }),
+          isPageSplitEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute bottom-10 right-16 md:right-20 text-zinc-400 font-semibold text-sm select-none pointer-events-none", children: [
+            pageIndex + 1,
+            "."
+          ] })
+        ]
+      },
+      pageIndex
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fixed bottom-6 right-6 flex flex-col items-end gap-4 z-50", children: [
+      onSave && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          onClick: onSave,
+          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
+          "aria-label": "Save Script",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Save, { className: "w-5 h-5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm font-semibold", children: "Save" })
+          ]
+        }
+      ),
+      onSaveAsPdf && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          onClick: onSaveAsPdf,
+          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
+          "aria-label": "Save Script as PDF",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileDown, { className: "w-5 h-5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm font-semibold", children: "Save as PDF" })
+          ]
+        }
+      ),
+      isRulesOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white/80 backdrop-blur-md rounded-xl shadow-lg border border-zinc-200/50 p-4 text-xs text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-64 origin-bottom-right animate-in fade-in zoom-in-95", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold text-zinc-800", children: "A4 Page Split" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": isPageSplitEnabled,
+                onClick: togglePageSplit,
+                className: `${isPageSplitEnabled ? "bg-zinc-900" : "bg-zinc-300"} relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `${isPageSplitEnabled ? "translate-x-4" : "translate-x-0"} pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1.5 pt-3 border-t border-zinc-200/50", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center justify-between gap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "New Block" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Enter" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center justify-between gap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Delete Block" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Backspace" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center justify-between gap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Change Type" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Ctrl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "+" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "\u2191/\u2193" })
+              ] })
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => setIsRulesOpen(!isRulesOpen),
+          className: `flex items-center justify-center w-12 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300 ${isRulesOpen ? "rotate-90" : "rotate-0"}`,
+          "aria-label": "Toggle Settings",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Cog, { className: "w-5 h-5" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// app/hook/use-screenplay-editor.ts
+var import_react2 = require("react");
+
+// app/service/screenplay-editor.service.ts
+function getNextBlockType(currentType) {
+  switch (currentType) {
+    case "SCENE_HEADING":
+      return "ACTION";
+    case "CHARACTER":
+      return "PARENTHETICAL";
+    case "PARENTHETICAL":
+      return "DIALOGUE";
+    case "DIALOGUE":
+      return "CHARACTER";
+    case "TRANSITION":
+      return "SCENE_HEADING";
+    default:
+      return "ACTION";
+  }
+}
+function createNewBlock(type) {
+  const newBlock = { id: uuid(), type, text: "" };
+  if (type === "SCENE_HEADING") {
+    newBlock.sceneType = "INT.";
+    newBlock.timeOfDay = "DAY";
+  }
+  return newBlock;
+}
+function addBlockAfter(blocks, currentBlockId) {
+  const currentIndex = blocks.findIndex((b) => b.id === currentBlockId);
+  if (currentIndex === -1) {
+    return { newBlocks: blocks, newBlockId: "" };
+  }
+  const currentBlock = blocks[currentIndex];
+  const nextType = getNextBlockType(currentBlock.type);
+  const newBlock = createNewBlock(nextType);
+  const newBlocks = [
+    ...blocks.slice(0, currentIndex + 1),
+    newBlock,
+    ...blocks.slice(currentIndex + 1)
+  ];
+  return { newBlocks, newBlockId: newBlock.id };
+}
+function deleteBlock(blocks, blockIdToDelete) {
+  var _a, _b, _c;
+  if (blocks.length <= 1) {
+    return { newBlocks: blocks, nextFocusedId: ((_a = blocks[0]) == null ? void 0 : _a.id) || null };
+  }
+  const index = blocks.findIndex((b) => b.id === blockIdToDelete);
+  if (index === -1) {
+    return { newBlocks: blocks, nextFocusedId: null };
+  }
+  const newBlocks = [...blocks];
+  newBlocks.splice(index, 1);
+  const nextFocusedId = ((_b = newBlocks[index]) == null ? void 0 : _b.id) || ((_c = newBlocks[index - 1]) == null ? void 0 : _c.id) || null;
+  return { newBlocks, nextFocusedId };
+}
+function updateBlock(blocks, id, key, value) {
+  return blocks.map((b) => b.id === id ? __spreadProps(__spreadValues({}, b), { [key]: value }) : b);
+}
+function changeBlockType(blocks, id, newType) {
+  const newBlock = createNewBlock(newType);
+  return blocks.map((b) => b.id === id ? __spreadProps(__spreadValues({}, newBlock), { id: b.id }) : b);
+}
+
+// app/hook/use-screenplay-editor.ts
+var initialBlocks = [
+  {
+    id: uuid(),
+    type: "SCENE_HEADING",
+    text: "",
+    sceneType: "INT.",
+    timeOfDay: "DAY"
+  }
+];
+function getCaretCharacterOffsetWithin(element) {
+  let caretOffset = 0;
+  const doc = element.ownerDocument;
+  const win = doc.defaultView;
+  const sel = win == null ? void 0 : win.getSelection();
+  if (sel && sel.rangeCount > 0) {
+    const range = sel.getRangeAt(0);
+    const preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(element);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    caretOffset = preCaretRange.toString().length;
+  }
+  return caretOffset;
+}
+function setCaretPosition(element, offset) {
+  const sel = window.getSelection();
+  if (!sel) return;
+  const range = document.createRange();
+  let currentOffset = 0;
+  let found = false;
+  function traverseNodes(node) {
+    var _a;
+    if (found) return;
+    if (node.nodeType === Node.TEXT_NODE) {
+      const length = ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
+      if (currentOffset + length >= offset) {
+        range.setStart(node, offset - currentOffset);
+        range.collapse(true);
+        found = true;
+      } else {
+        currentOffset += length;
+      }
+    } else {
+      for (let i = 0; i < node.childNodes.length; i++) {
+        traverseNodes(node.childNodes[i]);
+        if (found) break;
+      }
+    }
+  }
+  traverseNodes(element);
+  if (!found) {
+    range.setStart(element, 0);
+    range.collapse(true);
+  }
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+function useScreenplayEditor() {
+  const [blocks, setBlocks] = (0, import_react2.useState)(initialBlocks);
+  const refs = (0, import_react2.useRef)({});
+  const [focusedBlockId, setFocusedBlockId] = (0, import_react2.useState)(
+    initialBlocks[0].id
+  );
+  const [newBlockId, setNewBlockId] = (0, import_react2.useState)(null);
+  const [showSuggestions, setShowSuggestions] = (0, import_react2.useState)(false);
+  const blurTimeout = (0, import_react2.useRef)(null);
+  const [isPageSplitEnabled, setIsPageSplitEnabled] = (0, import_react2.useState)(false);
+  const [pageBreaks, setPageBreaks] = (0, import_react2.useState)([]);
+  const focusStateRef = (0, import_react2.useRef)(null);
+  const togglePageSplit = (0, import_react2.useCallback)(() => {
+    if (focusedBlockId && document.activeElement && document.activeElement.hasAttribute("contenteditable")) {
+      const el = refs.current[focusedBlockId];
+      if (el) {
+        const offset = getCaretCharacterOffsetWithin(el);
+        focusStateRef.current = { id: focusedBlockId, offset };
+      }
+    }
+    setIsPageSplitEnabled((prev) => !prev);
+  }, [focusedBlockId]);
+  const locations = (0, import_react2.useMemo)(() => {
+    const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
+    return [...new Set(locs)];
+  }, [blocks]);
+  const characters = (0, import_react2.useMemo)(() => {
+    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
+    return [...new Set(chars)];
+  }, [blocks]);
+  const sceneNumbers = (0, import_react2.useMemo)(() => {
+    const map = {};
+    let count = 0;
+    blocks.forEach((block) => {
+      if (block.type === "SCENE_HEADING") {
+        count++;
+        map[block.id] = count;
+      }
+    });
+    return map;
+  }, [blocks]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    if (newBlockId && refs.current[newBlockId]) {
+      (_a = refs.current[newBlockId]) == null ? void 0 : _a.focus();
+      setFocusedBlockId(newBlockId);
+      setNewBlockId(null);
+    }
+  }, [newBlockId]);
+  (0, import_react2.useEffect)(() => {
+    blocks.forEach((block) => {
+      const element = refs.current[block.id];
+      if (element && element.innerText !== block.text && document.activeElement !== element) {
+        element.innerText = block.text;
+      }
+    });
+  }, [blocks, isPageSplitEnabled, pageBreaks]);
+  (0, import_react2.useEffect)(() => {
+    if (!isPageSplitEnabled) {
+      setPageBreaks([]);
+      return;
+    }
+    const saveFocus = () => {
+      if (focusedBlockId && document.activeElement && document.activeElement.hasAttribute("contenteditable")) {
+        const el = refs.current[focusedBlockId];
+        if (el) {
+          const offset = getCaretCharacterOffsetWithin(el);
+          focusStateRef.current = { id: focusedBlockId, offset };
+        }
+      } else {
+        focusStateRef.current = null;
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      let currentHeight = 0;
+      let hasSceneOnCurrentPage = false;
+      const A4_HEIGHT = 960;
+      const newPageBreaks = [];
+      blocks.forEach((block) => {
+        const el = refs.current[block.id];
+        if (el) {
+          const measureEl = document.querySelector(`[data-block-id="${block.id}"]`) || el;
+          const style = window.getComputedStyle(measureEl);
+          const marginTop = parseFloat(style.marginTop) || 0;
+          const marginBottom = parseFloat(style.marginBottom) || 0;
+          const height = measureEl.getBoundingClientRect().height + marginTop + marginBottom;
+          let breakPage = false;
+          if (currentHeight + height > A4_HEIGHT) {
+            breakPage = true;
+          } else if (block.type === "SCENE_HEADING") {
+            if (hasSceneOnCurrentPage) {
+              breakPage = true;
+            } else if (currentHeight > A4_HEIGHT - 120) {
+              breakPage = true;
+            }
+          }
+          if (breakPage && currentHeight > 0) {
+            newPageBreaks.push(block.id);
+            currentHeight = height;
+            hasSceneOnCurrentPage = block.type === "SCENE_HEADING";
+          } else {
+            currentHeight += height;
+            if (block.type === "SCENE_HEADING") {
+              hasSceneOnCurrentPage = true;
+            }
+          }
+        }
+      });
+      setPageBreaks((prev) => {
+        if (prev.length !== newPageBreaks.length) {
+          saveFocus();
+          return newPageBreaks;
+        }
+        for (let i = 0; i < prev.length; i++) {
+          if (prev[i] !== newPageBreaks[i]) {
+            saveFocus();
+            return newPageBreaks;
+          }
+        }
+        return prev;
+      });
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [blocks, isPageSplitEnabled, focusedBlockId]);
+  const pages = (0, import_react2.useMemo)(() => {
+    if (!isPageSplitEnabled || pageBreaks.length === 0) return [blocks];
+    const result = [];
+    let currentPage = [];
+    for (const block of blocks) {
+      if (pageBreaks.includes(block.id) && currentPage.length > 0) {
+        result.push(currentPage);
+        currentPage = [];
+      }
+      currentPage.push(block);
+    }
+    if (currentPage.length > 0) result.push(currentPage);
+    return result;
+  }, [blocks, isPageSplitEnabled, pageBreaks]);
+  (0, import_react2.useEffect)(() => {
+    if (focusStateRef.current) {
+      const { id, offset } = focusStateRef.current;
+      const el = refs.current[id];
+      if (el && document.activeElement !== el) {
+        el.focus();
+        setCaretPosition(el, offset);
+      }
+      focusStateRef.current = null;
+    }
+  }, [pages]);
+  const handleBlockTextChange = (0, import_react2.useCallback)((id, text) => {
+    setBlocks((bs) => updateBlock(bs, id, "text", text));
+  }, []);
+  const handleSceneTypeChange = (0, import_react2.useCallback)(
+    (id, sceneType) => {
+      setBlocks(
+        (bs) => updateBlock(bs, id, "sceneType", sceneType)
+      );
+      setTimeout(() => {
+        var _a;
+        (_a = refs.current[id]) == null ? void 0 : _a.focus();
+        setFocusedBlockId(id);
+      }, 10);
+    },
+    []
+  );
+  const handleTimeOfDayChange = (0, import_react2.useCallback)((id, time) => {
+    setBlocks((bs) => updateBlock(bs, id, "timeOfDay", time));
+    setTimeout(() => {
+      var _a;
+      (_a = refs.current[id]) == null ? void 0 : _a.focus();
+      setFocusedBlockId(id);
+    }, 10);
+  }, []);
+  const handleBlockTypeChange = (0, import_react2.useCallback)(
+    (newType) => {
+      if (!focusedBlockId) return;
+      setBlocks(
+        (bs) => changeBlockType(bs, focusedBlockId, newType)
+      );
+      setTimeout(() => {
+        const el = refs.current[focusedBlockId];
+        if (el) {
+          el.innerText = "";
+          el.focus();
+        }
+      }, 0);
+    },
+    [focusedBlockId]
+  );
+  const focusBlock = (id, position = "start") => {
+    const el = refs.current[id];
+    if (!el) return;
+    el.focus();
+    const range = document.createRange();
+    const sel = window.getSelection();
+    if (!sel) return;
+    range.selectNodeContents(el);
+    range.collapse(position === "start");
+    sel.removeAllRanges();
+    sel.addRange(range);
+  };
+  const cycleBlockType = (id, direction) => {
+    setBlocks((bs) => {
+      const block = bs.find((b) => b.id === id);
+      if (!block) return bs;
+      const idx = blockTypes.indexOf(block.type);
+      let newIdx = direction === "up" ? idx - 1 : idx + 1;
+      if (newIdx < 0) newIdx = blockTypes.length - 1;
+      if (newIdx >= blockTypes.length) newIdx = 0;
+      return updateBlock(bs, id, "type", blockTypes[newIdx]);
+    });
+  };
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e, id, text) => {
+      var _a;
+      if ((e.key === "Backspace" || e.key === "Delete") && text.length <= 1) {
+        e.preventDefault();
+        const { newBlocks, nextFocusedId } = deleteBlock(
+          blocks,
+          id
+        );
+        setBlocks(newBlocks);
+        if (nextFocusedId) {
+          setTimeout(() => {
+            focusBlock(nextFocusedId, "end");
+          }, 0);
+        }
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const { newBlocks, newBlockId: newBlockId2 } = addBlockAfter(
+          blocks,
+          id
+        );
+        setBlocks(newBlocks);
+        setNewBlockId(newBlockId2);
+      } else if (e.key === "ArrowUp" && e.ctrlKey) {
+        e.preventDefault();
+        cycleBlockType(id, "up");
+        requestAnimationFrame(() => focusBlock(id));
+      } else if (e.key === "ArrowDown" && e.ctrlKey) {
+        e.preventDefault();
+        cycleBlockType(id, "down");
+        requestAnimationFrame(() => focusBlock(id));
+      } else if (e.key === "ArrowUp" && !e.ctrlKey) {
+        const selection = window.getSelection();
+        if (!selection || !selection.isCollapsed || selection.rangeCount === 0) {
+          return;
+        }
+        const range = selection.getRangeAt(0);
+        const contentEditable = e.currentTarget;
+        let atStart = false;
+        if (range.startOffset === 0) {
+          let node = range.startContainer;
+          if (node === contentEditable) {
+            atStart = true;
+          } else {
+            let atStartOfParents = true;
+            while (node !== contentEditable) {
+              if (node.previousSibling) {
+                atStartOfParents = false;
+                break;
+              }
+              node = node.parentNode;
+              if (!node) {
+                atStartOfParents = false;
+                break;
+              }
+            }
+            atStart = atStartOfParents;
+          }
+        }
+        if (atStart) {
+          e.preventDefault();
+          const currentIndex = blocks.findIndex((b) => b.id === id);
+          if (currentIndex > 0) {
+            const prevBlockId = blocks[currentIndex - 1].id;
+            focusBlock(prevBlockId, "end");
+          }
+        }
+      } else if (e.key === "ArrowDown" && !e.ctrlKey) {
+        const selection = window.getSelection();
+        if (!selection || !selection.isCollapsed || selection.rangeCount === 0) {
+          return;
+        }
+        const range = selection.getRangeAt(0);
+        const contentEditable = e.currentTarget;
+        const container = range.endContainer;
+        const isAtEndOffset = range.endOffset === (container.nodeType === Node.TEXT_NODE ? (_a = container.textContent) == null ? void 0 : _a.length : container.childNodes.length);
+        if (isAtEndOffset) {
+          let atEnd = false;
+          let node = container;
+          if (node === contentEditable) {
+            atEnd = true;
+          } else {
+            let atEndOfParents = true;
+            while (node !== contentEditable) {
+              if (node.nextSibling) {
+                atEndOfParents = false;
+                break;
+              }
+              node = node.parentNode;
+              if (!node) {
+                atEndOfParents = false;
+                break;
+              }
+            }
+            atEnd = atEndOfParents;
+          }
+          if (atEnd) {
+            e.preventDefault();
+            const currentIndex = blocks.findIndex((b) => b.id === id);
+            if (currentIndex < blocks.length - 1) {
+              const nextBlockId = blocks[currentIndex + 1].id;
+              focusBlock(nextBlockId, "start");
+            }
+          }
+        }
+      }
+    },
+    [blocks]
+  );
+  const handleFocus = (0, import_react2.useCallback)((id) => {
+    if (blurTimeout.current) {
+      clearTimeout(blurTimeout.current);
+    }
+    setFocusedBlockId(id);
+    setShowSuggestions(true);
+  }, []);
+  const handleBlur = (0, import_react2.useCallback)((id) => {
+    if (document.activeElement === refs.current[id]) return;
+    blurTimeout.current = setTimeout(() => setShowSuggestions(false), 200);
+  }, []);
+  return {
+    blocks,
+    pages,
+    isPageSplitEnabled,
+    togglePageSplit,
+    refs,
+    focusedBlockId,
+    showSuggestions,
+    locations,
+    characters,
+    sceneNumbers,
+    handleBlockTextChange,
+    handleSceneTypeChange,
+    handleTimeOfDayChange,
+    handleBlockTypeChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScreenplayEditorView,
+  blockStyles,
+  blockTypes,
+  icons,
+  timeOfDayOptions,
+  useScreenplayEditor,
+  uuid
+});
+//# sourceMappingURL=index.js.map