@vishu1301/script-writing 1.5.9 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +932 -550
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +7 -2
  4. package/dist/index.d.ts +7 -2
  5. package/dist/index.js +933 -551
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -77,12 +77,12 @@ var blockTypes = [
77
77
  ];
78
78
  var uuid = () => Math.random().toString(36).slice(2, 9);
79
79
  var icons = {
80
- SCENE_HEADING: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "w-5 h-5" }),
81
- ACTION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { className: "w-5 h-5" }),
82
- CHARACTER: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-5 h-5" }),
83
- PARENTHETICAL: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Parentheses, { className: "w-5 h-5" }),
84
- DIALOGUE: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareText, { className: "w-5 h-5" }),
85
- TRANSITION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownRight, { className: "w-5 h-5" })
80
+ SCENE_HEADING: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mountain, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
81
+ ACTION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clapperboard, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
82
+ CHARACTER: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
83
+ PARENTHETICAL: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Parentheses, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
84
+ DIALOGUE: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 }),
85
+ TRANSITION: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-[18px] h-[18px]", strokeWidth: 1.5 })
86
86
  };
87
87
  var blockStyles = {
88
88
  SCENE_HEADING: {
@@ -817,7 +817,7 @@ function PhoneticSuggestions({
817
817
  ] });
818
818
  }
819
819
  pdfjs__namespace.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs__namespace.version}/build/pdf.worker.min.mjs`;
820
- function PdfImporter({ onScriptImported, disabled, children }) {
820
+ function PdfImporter({ onScriptImported, disabled, children, className }) {
821
821
  const [isProcessing, setIsProcessing] = React4.useState(false);
822
822
  const [error, setError] = React4.useState(null);
823
823
  const fileInputRef = React4.useRef(null);
@@ -854,9 +854,9 @@ function PdfImporter({ onScriptImported, disabled, children }) {
854
854
  let divText = ((_a2 = div.textContent) == null ? void 0 : _a2.trim()) || "";
855
855
  if (!divText) return;
856
856
  let type = "ACTION";
857
- for (const className of Array.from(div.classList)) {
858
- if (typeMap[className]) {
859
- type = typeMap[className];
857
+ for (const className2 of Array.from(div.classList)) {
858
+ if (typeMap[className2]) {
859
+ type = typeMap[className2];
860
860
  break;
861
861
  }
862
862
  }
@@ -960,7 +960,7 @@ function PdfImporter({ onScriptImported, disabled, children }) {
960
960
  {
961
961
  onClick: handleClick,
962
962
  disabled: isProcessing || disabled,
963
- className: `flex items-center justify-center transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${isProcessing ? "w-auto px-3 sm:px-4 h-8 sm:h-10 rounded-full text-sm font-semibold bg-zinc-100 text-zinc-500" : "w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
963
+ className: className || `flex items-center justify-center transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${isProcessing ? "w-auto px-3 sm:px-4 h-8 sm:h-10 rounded-full text-sm font-semibold bg-zinc-100 text-zinc-500" : "w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
964
964
  "aria-label": "Import Script",
965
965
  children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-semibold", children: "Processing..." }) : children
966
966
  }
@@ -1244,6 +1244,44 @@ function PhoneticGuide({
1244
1244
  }
1245
1245
  );
1246
1246
  }
1247
+ function Tooltip({
1248
+ children,
1249
+ content,
1250
+ shortcut,
1251
+ align = "center"
1252
+ }) {
1253
+ const alignClasses = {
1254
+ center: "left-1/2 -translate-x-1/2 items-center",
1255
+ left: "left-0 items-start",
1256
+ right: "right-0 items-end"
1257
+ };
1258
+ const arrowClasses = {
1259
+ center: "",
1260
+ left: "left-3.5",
1261
+ right: "right-3.5"
1262
+ };
1263
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative flex items-center justify-center", children: [
1264
+ children,
1265
+ /* @__PURE__ */ jsxRuntime.jsxs(
1266
+ "div",
1267
+ {
1268
+ className: `absolute top-[calc(100%+8px)] scale-95 opacity-0 pointer-events-none group-hover:scale-100 group-hover:opacity-100 transition-all duration-150 ease-out z-[100] flex flex-col ${alignClasses[align]}`,
1269
+ children: [
1270
+ /* @__PURE__ */ jsxRuntime.jsx(
1271
+ "div",
1272
+ {
1273
+ className: `w-2 h-2 rotate-45 bg-blumine-950 border-l border-t border-white/10 -mb-1 shadow-sm ${align === "center" ? "" : "relative"} ${arrowClasses[align]}`
1274
+ }
1275
+ ),
1276
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-blumine-950/95 text-white text-[11px] font-medium px-2.5 py-1.5 rounded-lg shadow-xl border border-white/10 backdrop-blur-sm whitespace-nowrap flex items-center gap-1.5", children: [
1277
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: content }),
1278
+ shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "bg-blumine-800 text-[10px] text-blumine-300 px-1.5 py-0.5 rounded border border-zinc-700 font-sans font-semibold", children: shortcut })
1279
+ ] })
1280
+ ]
1281
+ }
1282
+ )
1283
+ ] });
1284
+ }
1247
1285
  function ScreenplayEditorView({
1248
1286
  blocks,
1249
1287
  refs,
@@ -1285,7 +1323,8 @@ function ScreenplayEditorView({
1285
1323
  currentLanguage,
1286
1324
  setCurrentLanguage,
1287
1325
  phoneticSuggestions,
1288
- handleSelectPhoneticSuggestion
1326
+ handleSelectPhoneticSuggestion,
1327
+ autosaveStatus
1289
1328
  }) {
1290
1329
  const [isRulesOpen, setIsRulesOpen] = React4.useState(false);
1291
1330
  const [isLanguageOpen, setIsLanguageOpen] = React4.useState(false);
@@ -1335,168 +1374,299 @@ function ScreenplayEditorView({
1335
1374
  document.head.appendChild(style);
1336
1375
  }
1337
1376
  }, [COURIER_STACK]);
1338
- if (isLoading) {
1339
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-white/80 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
1340
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 text-zinc-400 animate-spin" }),
1341
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-zinc-500 text-sm font-medium", children: "Loading script..." })
1342
- ] }) });
1343
- }
1344
1377
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1345
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-2 sm:top-6 z-50 mx-auto w-full max-w-[1037px] rounded-[2.5rem] sm:rounded-[2rem] bg-gradient-to-b from-white/90 to-white/70 border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.06),0_2px_8px_rgba(16,37,54,0.03)] backdrop-blur-xl flex items-center justify-between px-2 py-1.5 sm:px-3 sm:py-2 mb-6 sm:mb-12 select-none transition-all", children: [
1346
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 overflow-x-auto pr-2 flex-1 no-scrollbar rounded-full p-1 bg-gradient-to-b from-white/80 to-blumine-50 border border-blumine-200 shadow-inner", children: blockTypes.map((type) => {
1378
+ isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-blumine-500/40 backdrop-blur-md p-6", children: [
1379
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
1380
+ @keyframes gpu-spin {
1381
+ 0% { transform: rotate(0deg); }
1382
+ 100% { transform: rotate(360deg); }
1383
+ }
1384
+ .gpu-spinner-container {
1385
+ transform: translate3d(0,0,0);
1386
+ will-change: transform;
1387
+ }
1388
+ .gpu-spinner {
1389
+ width: 32px;
1390
+ height: 32px;
1391
+ border: 3.5px solid rgba(255, 255, 255, 0.25);
1392
+ border-top-color: #ffffff;
1393
+ border-radius: 50%;
1394
+ animation: gpu-spin 0.85s linear infinite;
1395
+ will-change: transform;
1396
+ transform: translate3d(0,0,0);
1397
+ }
1398
+ ` }),
1399
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full border-2 border-white border-dashed rounded-[2.5rem] flex items-center justify-center gpu-spinner-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
1400
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gpu-spinner" }),
1401
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-lg font-semibold mt-4", children: "Preparing Script..." }),
1402
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-xs font-medium mt-2", children: "Please wait while we prepare your screenplay." }),
1403
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/80 text-xs mt-2", children: "Status: Arranging data..." })
1404
+ ] }) })
1405
+ ] }),
1406
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 left-0 right-0 z-50 w-full bg-zinc-50/95 backdrop-blur-md border-b border-zinc-200/60 shadow-[0_1px_2px_rgba(0,0,0,0.01)] flex flex-wrap lg:flex-nowrap items-center justify-between px-3 sm:px-6 py-2 mb-8 select-none transition-all gap-y-2", children: [
1407
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 w-auto shrink-0 order-1", children: [
1408
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold tracking-wider text-blumine-400/80 uppercase", children: "Script Editor" }),
1409
+ autosaveStatus === "saved" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100/50 animate-in fade-in duration-300", children: [
1410
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
1411
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Script synced" })
1412
+ ] }),
1413
+ autosaveStatus === "saving" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-blue-50 text-blue-600 border border-blue-100/50 animate-in fade-in duration-300", children: [
1414
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-2.5 h-2.5 animate-spin" }),
1415
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Saving..." })
1416
+ ] }),
1417
+ autosaveStatus === "typing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-amber-50 text-amber-600 border border-amber-100/50 animate-in fade-in duration-300", children: [
1418
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" }),
1419
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Drafting..." })
1420
+ ] }),
1421
+ autosaveStatus === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-rose-50 text-rose-600 border border-rose-100/50 animate-in fade-in duration-300", children: [
1422
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse" }),
1423
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wide", children: "Error saving" })
1424
+ ] })
1425
+ ] }),
1426
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1 sm:gap-2 basis-full lg:basis-auto flex-initial min-w-0 py-1 lg:py-0.5 order-3 lg:order-2", children: blockTypes.map((type) => {
1347
1427
  var _a;
1348
1428
  const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
1349
- return /* @__PURE__ */ jsxRuntime.jsxs(
1350
- "button",
1429
+ return /* @__PURE__ */ jsxRuntime.jsx(
1430
+ Tooltip,
1351
1431
  {
1352
- type: "button",
1353
- disabled: isLocked,
1354
- onClick: () => handleBlockTypeChange(type),
1355
- className: `group w-fit flex shrink-0 items-center gap-2 px-3 sm:px-4 h-[40px] sm:h-[42px] rounded-full font-medium text-xs sm:text-sm transition-all duration-200 ease-out active:scale-95 whitespace-nowrap ${selected ? "bg-gradient-to-b from-white to-blumine-100 text-blumine-500 shadow-[0_6px_14px_rgba(24,88,122,0.15)] border border-blumine-200" : "text-blumine-500 hover:bg-white"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
1356
- children: [
1357
- /* @__PURE__ */ jsxRuntime.jsx(
1358
- "div",
1359
- {
1360
- className: `flex items-center justify-center transition-opacity duration-200 ${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"}`,
1361
- children: icons[type]
1362
- }
1363
- ),
1364
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline tracking-wide", children: blockStyles[type].label })
1365
- ]
1432
+ content: blockStyles[type].label,
1433
+ shortcut: "Ctrl + \u2191/\u2193",
1434
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1435
+ "button",
1436
+ {
1437
+ type: "button",
1438
+ disabled: isLocked,
1439
+ onClick: () => handleBlockTypeChange(type),
1440
+ className: `w-8 h-8 sm:w-9 sm:h-9 flex shrink-0 items-center justify-center rounded-lg transition-all duration-150 ease-out active:scale-95 whitespace-nowrap ${selected ? "bg-blumine-200/60 text-blumine-800 shadow-sm border border-blumine-200/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
1441
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1442
+ "div",
1443
+ {
1444
+ className: `flex items-center justify-center transition-all duration-150 ${selected ? "scale-105 opacity-100" : "opacity-80 hover:opacity-100"}`,
1445
+ children: icons[type]
1446
+ }
1447
+ )
1448
+ }
1449
+ )
1366
1450
  },
1367
1451
  type
1368
1452
  );
1369
1453
  }) }),
1370
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0 ml-2 sm:ml-0 pl-2 sm:pl-1 border-l sm:border-none border-blumine-200/70", children: [
1371
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-[1px] h-6 bg-blumine-200 rounded-full mx-1" }),
1372
- showPdfImport && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
1373
- PdfImporter,
1374
- {
1375
- disabled: isLocked,
1376
- onScriptImported: handleScriptImport,
1377
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) })
1378
- }
1379
- ),
1380
- onToggleLock && /* @__PURE__ */ jsxRuntime.jsx(
1381
- "button",
1382
- {
1383
- onClick: onToggleLock,
1384
- className: `w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full transition-all duration-200 active:scale-95 ${isLocked ? "text-rose-500 bg-rose-50/60" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
1385
- children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1386
- }
1387
- ),
1388
- onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
1454
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 sm:gap-1.5 w-auto lg:w-[220px] shrink-0 order-2 lg:order-3", children: [
1455
+ onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Save changes", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
1389
1456
  "button",
1390
1457
  {
1391
1458
  onClick: onSave,
1392
- className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
1393
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1394
- }
1395
- ),
1396
- onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsxRuntime.jsx(
1397
- "button",
1398
- {
1399
- onClick: onSaveAsPdf,
1400
- className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
1401
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1459
+ className: "w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700 transition active:scale-95",
1460
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1461
+ lucideReact.Save,
1462
+ {
1463
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1464
+ strokeWidth: 1.5
1465
+ }
1466
+ )
1402
1467
  }
1403
- ),
1404
- onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
1405
- "button",
1468
+ ) }),
1469
+ onToggleLock && /* @__PURE__ */ jsxRuntime.jsx(
1470
+ Tooltip,
1406
1471
  {
1407
- onClick: onSyncWithCloud,
1408
- className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95",
1409
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1472
+ content: isLocked ? "Unlock Screenplay" : "Lock Screenplay",
1473
+ align: "right",
1474
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1475
+ "button",
1476
+ {
1477
+ onClick: onToggleLock,
1478
+ className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition active:scale-95 ${isLocked ? "text-rose-500 hover:bg-rose-50 hover:text-rose-700 bg-rose-50/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
1479
+ children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(
1480
+ lucideReact.Lock,
1481
+ {
1482
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1483
+ strokeWidth: 1.5
1484
+ }
1485
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
1486
+ lucideReact.Unlock,
1487
+ {
1488
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1489
+ strokeWidth: 1.5
1490
+ }
1491
+ )
1492
+ }
1493
+ )
1410
1494
  }
1411
1495
  ),
1412
1496
  /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
1413
- /* @__PURE__ */ jsxRuntime.jsx(
1497
+ /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Settings & Actions", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
1414
1498
  "button",
1415
1499
  {
1416
1500
  onClick: () => setIsRulesOpen(!isRulesOpen),
1417
- className: `w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-gradient-to-b from-white to-blumine-100 text-blumine-500 shadow-md border border-blumine-100" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
1418
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1501
+ className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-blumine-200/60 text-blumine-800 shadow-sm border border-blumine-200/50" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
1502
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1503
+ lucideReact.Cog,
1504
+ {
1505
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1506
+ strokeWidth: 1.5
1507
+ }
1508
+ )
1419
1509
  }
1420
- ),
1421
- isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute -right-2 top-[calc(100%+14px)] w-[332px] max-w-[90vw] p-3 rounded-[24px] bg-white border border-blumine-200/70 shadow-[0_18px_40px_rgba(16,37,54,0.08),0_3px_10px_rgba(16,37,54,0.04)] backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
1422
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 right-5 w-4 h-4 rotate-45 bg-white border-l border-t border-blumine-200/70" }),
1423
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
1424
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-xl bg-gradient-to-b from-white to-blumine-50 text-blumine-500 border border-blumine-200/70 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4" }) }),
1510
+ ) }),
1511
+ isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[360px] max-w-[90vw] p-4 rounded-2xl bg-white border border-blumine-200 shadow-2xl backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
1512
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1.5 right-3.5 w-3 h-3 rotate-45 bg-white border-l border-t border-blumine-200" }),
1513
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-4 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
1514
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-xl bg-gradient-to-b from-white to-blumine-50/50 text-blumine-600 border border-blumine-200 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cog, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
1425
1515
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1426
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[15px] font-semibold text-blumine-900 leading-tight", children: "Settings & Shortcuts" }),
1427
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-blumine-500 mt-1", children: "Writing flow & editor controls" })
1516
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[15px] font-semibold text-blumine-800 leading-tight", children: "Settings & Actions" }),
1517
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-blumine-400 mt-1", children: "Screenplay controls & keyboard shortcuts" })
1428
1518
  ] })
1429
1519
  ] }) }),
1430
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
1431
- {
1432
- title: "New Block",
1433
- desc: "Insert the next section",
1434
- key: ["Enter"]
1435
- },
1436
- {
1437
- title: "Delete Block",
1438
- desc: "Remove selected section",
1439
- key: ["Backspace \u{1F860}"]
1440
- },
1441
- {
1442
- title: "Change Type",
1443
- desc: "Cycle block styles",
1444
- key: ["Ctrl", "+", "\u2191/\u2193"]
1445
- }
1446
- ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
1447
- "div",
1448
- {
1449
- className: "flex items-center justify-between gap-4 p-3 rounded-[18px] bg-gradient-to-b from-white to-blumine-50/50 border border-blumine-200/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]",
1450
- children: [
1451
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
1452
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blumine-800", children: item.title }),
1453
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-blumine-500 truncate", children: item.desc })
1454
- ] }),
1455
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0", children: item.key.map(
1456
- (k, i) => k === "+" ? /* @__PURE__ */ jsxRuntime.jsx(
1457
- "span",
1458
- {
1459
- className: "text-blumine-400 text-xs font-semibold",
1460
- children: "+"
1461
- },
1462
- i
1463
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1464
- "kbd",
1520
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-4", children: [
1521
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-blumine-400 uppercase tracking-wider", children: "Document Actions" }) }),
1522
+ showPdfImport && /* @__PURE__ */ jsxRuntime.jsx(
1523
+ PdfImporter,
1524
+ {
1525
+ disabled: isLocked,
1526
+ onScriptImported: (title, content, preParsedBlocks) => {
1527
+ handleScriptImport(title, content, preParsedBlocks);
1528
+ setIsRulesOpen(false);
1529
+ },
1530
+ className: "w-full text-left",
1531
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1532
+ "div",
1533
+ {
1534
+ className: `w-full flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200 cursor-pointer ${isLocked ? "opacity-60 cursor-not-allowed pointer-events-none" : ""}`,
1535
+ children: [
1536
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-lg bg-blumine-50 text-blumine-600 border border-blumine-100 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
1537
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-left", children: [
1538
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: "Import PDF" }),
1539
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: isLocked ? "Unlock screenplay to import files" : "Load screenplay from external file" })
1540
+ ] })
1541
+ ]
1542
+ }
1543
+ )
1544
+ }
1545
+ ),
1546
+ onToggleLock && /* @__PURE__ */ jsxRuntime.jsxs(
1547
+ "button",
1548
+ {
1549
+ onClick: () => {
1550
+ onToggleLock();
1551
+ },
1552
+ className: "w-full text-left flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200",
1553
+ children: [
1554
+ /* @__PURE__ */ jsxRuntime.jsx(
1555
+ "div",
1465
1556
  {
1466
- className: "min-w-[28px] px-2 py-1 text-[11px] font-bold text-primary bg-gradient-to-b from-white to-blumine-100 border border-blumine-200/70 rounded-full text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]",
1467
- children: k
1468
- },
1469
- i
1470
- )
1471
- ) })
1472
- ]
1473
- },
1474
- item.title
1475
- )) })
1557
+ className: `w-8 h-8 flex items-center justify-center rounded-lg shrink-0 border ${isLocked ? "bg-rose-50 text-rose-500 border-rose-100/50" : "bg-blumine-50 text-blumine-600 border-blumine-100/50"}`,
1558
+ children: isLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-4 h-4", strokeWidth: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-4 h-4", strokeWidth: 1.5 })
1559
+ }
1560
+ ),
1561
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1562
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: isLocked ? "Unlock Screenplay" : "Lock Screenplay" }),
1563
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: isLocked ? "Enable editing controls" : "Prevent accidental editing" })
1564
+ ] })
1565
+ ]
1566
+ }
1567
+ ),
1568
+ onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsxRuntime.jsxs(
1569
+ "button",
1570
+ {
1571
+ onClick: () => {
1572
+ onSaveAsPdf();
1573
+ setIsRulesOpen(false);
1574
+ },
1575
+ className: "w-full text-left flex items-center gap-3 p-3 rounded-xl border border-blumine-100 bg-gradient-to-b from-white to-blumine-50/10 hover:from-blumine-50/40 hover:to-blumine-50/60 hover:border-blumine-200 hover:shadow-sm active:scale-[0.98] transition-all duration-200",
1576
+ children: [
1577
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center rounded-lg bg-blumine-50 text-blumine-600 border border-blumine-100 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "w-4 h-4", strokeWidth: 1.5 }) }),
1578
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1579
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-blumine-800 leading-none", children: "Save as PDF" }),
1580
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-blumine-400 mt-1", children: "Export screenplay to standard print PDF" })
1581
+ ] })
1582
+ ]
1583
+ }
1584
+ )
1585
+ ] }),
1586
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-blumine-100/60 my-4" }),
1587
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1588
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5 mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold text-blumine-400 uppercase tracking-wider", children: "Keyboard Shortcuts" }) }),
1589
+ [
1590
+ {
1591
+ title: "New Block",
1592
+ desc: "Insert the next section",
1593
+ key: ["Enter"]
1594
+ },
1595
+ {
1596
+ title: "Delete Block",
1597
+ desc: "Remove selected section",
1598
+ key: ["Backspace \u{1F860}"]
1599
+ },
1600
+ {
1601
+ title: "Change Type",
1602
+ desc: "Cycle block styles",
1603
+ key: ["Ctrl", "+", "\u2191/\u2193"]
1604
+ }
1605
+ ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
1606
+ "div",
1607
+ {
1608
+ className: "flex items-center justify-between gap-4 p-2.5 rounded-xl bg-gradient-to-b from-white to-blumine-50/30 border border-blumine-100/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]",
1609
+ children: [
1610
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 text-left", children: [
1611
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-blumine-800", children: item.title }),
1612
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-blumine-400 truncate mt-0.5", children: item.desc })
1613
+ ] }),
1614
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0", children: item.key.map(
1615
+ (k, i) => k === "+" ? /* @__PURE__ */ jsxRuntime.jsx(
1616
+ "span",
1617
+ {
1618
+ className: "text-blumine-400 text-xs font-semibold",
1619
+ children: "+"
1620
+ },
1621
+ i
1622
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
1623
+ "kbd",
1624
+ {
1625
+ className: "min-w-[28px] px-2 py-1 text-[11px] font-bold text-blumine-700 bg-gradient-to-b from-white to-blumine-100 border border-blumine-200 rounded-lg text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]",
1626
+ children: k
1627
+ },
1628
+ i
1629
+ )
1630
+ ) })
1631
+ ]
1632
+ },
1633
+ item.title
1634
+ ))
1635
+ ] })
1476
1636
  ] })
1477
1637
  ] }),
1478
1638
  /* @__PURE__ */ jsxRuntime.jsxs(
1479
1639
  "div",
1480
1640
  {
1481
1641
  ref: languageRef,
1482
- className: "flex items-center pl-1.5 border-l border-blumine-200/70",
1642
+ className: "relative flex items-center pl-1.5 border-l border-blumine-200",
1483
1643
  children: [
1484
- /* @__PURE__ */ jsxRuntime.jsxs(
1485
- "button",
1644
+ /* @__PURE__ */ jsxRuntime.jsx(
1645
+ Tooltip,
1486
1646
  {
1487
- onClick: () => setIsLanguageOpen(!isLanguageOpen),
1488
- className: `flex items-center gap-2 pr-4 pl-2 h-9 sm:h-10 rounded-full transition-all duration-200 active:scale-95 ${isLanguageOpen ? "bg-blumine-50 text-blumine-600 shadow-sm" : "text-blumine-500 hover:text-blumine-900 hover:bg-white/70"}`,
1489
- children: [
1490
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 flex items-center justify-center rounded-full bg-white shadow-sm border border-blumine-100", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "w-3.5 h-3.5" }) }),
1491
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold whitespace-nowrap", children: LANGUAGE_CONFIGS[currentLanguage].name })
1492
- ]
1647
+ content: `Input Language: ${LANGUAGE_CONFIGS[currentLanguage].name}`,
1648
+ align: "right",
1649
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1650
+ "button",
1651
+ {
1652
+ onClick: () => setIsLanguageOpen(!isLanguageOpen),
1653
+ className: `w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg transition-all duration-200 active:scale-95 ${isLanguageOpen ? "bg-blumine-200/60 text-blumine-800 border border-blumine-200 shadow-sm" : "text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700"}`,
1654
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1655
+ lucideReact.Languages,
1656
+ {
1657
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1658
+ strokeWidth: 1.5
1659
+ }
1660
+ )
1661
+ }
1662
+ )
1493
1663
  }
1494
1664
  ),
1495
- isLanguageOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[400px] max-w-[90vw] p-3 rounded-[24px] bg-white border border-blumine-200/70 shadow-[0_18px_40px_rgba(16,37,54,0.08)] backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
1496
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 right-12 w-4 h-4 rotate-45 bg-white border-l border-t border-blumine-200/70" }),
1665
+ isLanguageOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-[calc(100%+14px)] w-[400px] max-w-[90vw] p-3 rounded-2xl bg-white border border-blumine-200 shadow-xl backdrop-blur-xl origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
1666
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1.5 right-3.5 w-3 h-3 rotate-45 bg-white border-l border-t border-blumine-200" }),
1497
1667
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 mb-3", children: [
1498
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[13px] font-bold text-blumine-900 uppercase tracking-wider", children: "Select Input Language" }),
1499
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-blumine-500 mt-0.5", children: "Direct keyboard mapping (InScript logic)" })
1668
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[13px] font-bold text-blumine-800 uppercase tracking-wider", children: "Select Input Language" }),
1669
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-blumine-400 mt-0.5", children: "Direct keyboard mapping (InScript logic)" })
1500
1670
  ] }),
1501
1671
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5 max-h-[300px] overflow-y-auto pr-1 flex-1 custom-scrollbar", children: Object.keys(LANGUAGE_CONFIGS).map(
1502
1672
  (lang) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1506,16 +1676,16 @@ function ScreenplayEditorView({
1506
1676
  setCurrentLanguage(lang);
1507
1677
  setIsLanguageOpen(false);
1508
1678
  },
1509
- className: `group flex items-center justify-between px-3.5 py-2.5 rounded-[16px] transition-all duration-200 ${currentLanguage === lang ? "bg-gradient-to-br from-blumine-50 to-white border border-blumine-200/50 shadow-sm" : "hover:bg-zinc-50 border border-transparent"}`,
1679
+ className: `group flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all duration-200 ${currentLanguage === lang ? "bg-blumine-100/80 text-blumine-800 border border-blumine-200/50 shadow-sm" : "hover:bg-blumine-50 border border-transparent"}`,
1510
1680
  children: [
1511
1681
  /* @__PURE__ */ jsxRuntime.jsx(
1512
1682
  "span",
1513
1683
  {
1514
- className: `text-sm font-medium ${currentLanguage === lang ? "text-blumine-600" : "text-zinc-600"}`,
1684
+ className: `text-sm font-medium ${currentLanguage === lang ? "text-blumine-800 font-semibold" : "text-blumine-500"}`,
1515
1685
  children: LANGUAGE_CONFIGS[lang].name
1516
1686
  }
1517
1687
  ),
1518
- currentLanguage === lang && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-blumine-500 flex items-center justify-center text-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3" }) })
1688
+ currentLanguage === lang && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-blumine-700 flex items-center justify-center text-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3", strokeWidth: 2 }) })
1519
1689
  ]
1520
1690
  },
1521
1691
  lang
@@ -1525,15 +1695,20 @@ function ScreenplayEditorView({
1525
1695
  ]
1526
1696
  }
1527
1697
  ),
1528
- LANGUAGE_CONFIGS[currentLanguage].isPhonetic && /* @__PURE__ */ jsxRuntime.jsx(
1698
+ LANGUAGE_CONFIGS[currentLanguage].isPhonetic && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Phonetic Keyboard Rules", align: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
1529
1699
  "button",
1530
1700
  {
1531
1701
  onClick: () => setIsPhoneticGuideOpen(true),
1532
- className: "w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-full text-blumine-500 hover:text-blumine-900 hover:bg-white/70 transition active:scale-95 ml-1",
1533
- title: "Phonetic Keyboard Rules",
1534
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
1702
+ className: "w-8 h-8 sm:w-9 sm:h-9 flex items-center justify-center rounded-lg text-blumine-400 hover:bg-blumine-100 hover:text-blumine-700 transition active:scale-95 ml-1",
1703
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1704
+ lucideReact.Keyboard,
1705
+ {
1706
+ className: "w-4 h-4 sm:w-[18px] sm:h-[18px]",
1707
+ strokeWidth: 1.5
1708
+ }
1709
+ )
1535
1710
  }
1536
- )
1711
+ ) })
1537
1712
  ] })
1538
1713
  ] }),
1539
1714
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1544,7 +1719,7 @@ function ScreenplayEditorView({
1544
1719
  onClose: () => setIsPhoneticGuideOpen(false)
1545
1720
  }
1546
1721
  ),
1547
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
1722
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center px-4 sm:px-6 md:px-8", children: /* @__PURE__ */ jsxRuntime.jsx(
1548
1723
  "div",
1549
1724
  {
1550
1725
  className: "relative bg-[#fdfdfc] shadow-2xl 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-[297mm] shrink-0",
@@ -1557,346 +1732,370 @@ function ScreenplayEditorView({
1557
1732
  },
1558
1733
  "data-screenplay-editor": "true",
1559
1734
  dir: LANGUAGE_CONFIGS[currentLanguage].dir,
1560
- children: blocks.map((block) => {
1561
- var _a, _b;
1562
- return /* @__PURE__ */ jsxRuntime.jsx(
1563
- "div",
1564
- {
1565
- "data-block-id": block.id,
1566
- className: `relative rounded-sm transition-all duration-200 outline-none ${focusedBlockId === block.id ? "bg-zinc-100/50" : "bg-transparent"}`,
1567
- "data-block-type": block.type,
1568
- children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1569
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
1570
- /* @__PURE__ */ jsxRuntime.jsx(
1571
- "input",
1572
- {
1573
- className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none bg-transparent outline-none focus:ring-1 focus:ring-blue-400 rounded-sm",
1574
- spellCheck: false,
1575
- disabled: isLocked,
1576
- value: block.sceneNumber || "",
1577
- onChange: (e) => handleSceneNumberChange(
1578
- block.id,
1579
- e.target.value.toUpperCase()
1580
- ),
1581
- onFocus: () => handleFocus(block.id),
1582
- onBlur: () => handleBlur(block.id),
1583
- onKeyDown: (e) => {
1584
- if (e.key === "Enter" || e.key === "Backspace") {
1585
- e.stopPropagation();
1586
- }
1587
- },
1588
- "aria-label": "Scene Number"
1589
- }
1590
- ),
1591
- /* @__PURE__ */ jsxRuntime.jsxs(
1592
- "select",
1593
- {
1594
- 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",
1595
- "aria-label": "Scene Type",
1596
- disabled: isLocked,
1597
- value: (_a = block.sceneType) != null ? _a : "INT.",
1598
- onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
1599
- style: {
1600
- appearance: "none"
1601
- },
1602
- children: [
1603
- /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT." }),
1604
- /* @__PURE__ */ jsxRuntime.jsx("option", { children: "EXT." }),
1605
- /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT/EXT." })
1606
- ]
1607
- }
1608
- ),
1609
- /* @__PURE__ */ jsxRuntime.jsx(
1610
- "div",
1611
- {
1612
- ref: (el) => {
1613
- if (!el) return;
1614
- refs.current[block.id] = el;
1615
- },
1616
- contentEditable: !isLocked,
1617
- suppressContentEditableWarning: true,
1618
- "aria-label": `Scene Heading: ${block.text}`,
1619
- "aria-haspopup": "listbox",
1620
- "aria-expanded": focusedBlockId === block.id && showSuggestions && locations.length > 0,
1621
- spellCheck: false,
1622
- className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
1623
- style: {
1624
- minWidth: "3rem"
1625
- },
1626
- onInput: (e) => handleBlockTextChange(
1627
- block.id,
1628
- e.target.innerText
1629
- ),
1630
- onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
1631
- onFocus: () => handleFocus(block.id),
1632
- onBlur: () => handleBlur(block.id)
1633
- }
1634
- ),
1635
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
1636
- /* @__PURE__ */ jsxRuntime.jsx(
1637
- "select",
1638
- {
1639
- 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",
1640
- "aria-label": "Time of Day",
1641
- disabled: isLocked,
1642
- value: (_b = block.timeOfDay) != null ? _b : "DAY",
1643
- style: {
1644
- appearance: "none"
1645
- },
1646
- onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
1647
- children: timeOfDayOptions.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: t }, t))
1648
- }
1649
- )
1650
- ] }),
1651
- focusedBlockId === block.id && showSuggestions && locations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1652
- "div",
1653
- {
1654
- role: "listbox",
1655
- id: `suggestions-${block.id}`,
1656
- 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",
1657
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
1658
- (loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
1659
- ).map((loc) => /* @__PURE__ */ jsxRuntime.jsxs(
1660
- "div",
1661
- {
1662
- role: "option",
1663
- 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",
1664
- onMouseDown: (e) => {
1665
- e.preventDefault();
1666
- const element = refs.current[block.id];
1667
- if (element) {
1668
- element.innerText = loc;
1669
- handleBlockTextChange(block.id, loc);
1670
- element.focus();
1671
- const range = document.createRange();
1672
- const sel = window.getSelection();
1673
- range.selectNodeContents(element);
1674
- range.collapse(false);
1675
- sel == null ? void 0 : sel.removeAllRanges();
1676
- sel == null ? void 0 : sel.addRange(range);
1677
- }
1678
- handleBlur(block.id);
1679
- },
1680
- children: [
1681
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
1682
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
1683
- ]
1684
- },
1685
- loc
1686
- )) })
1687
- }
1688
- ),
1689
- focusedBlockId === block.id && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1690
- PhoneticSuggestions,
1691
- {
1692
- suggestions: phoneticSuggestions,
1693
- onSelect: handleSelectPhoneticSuggestion
1694
- }
1695
- )
1696
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1697
- /* @__PURE__ */ jsxRuntime.jsx(
1698
- "div",
1699
- {
1700
- ref: (el) => {
1701
- if (!el) return;
1702
- refs.current[block.id] = el;
1703
- },
1704
- contentEditable: !isLocked,
1705
- suppressContentEditableWarning: true,
1706
- "aria-label": `${blockStyles[block.type].label} text`,
1707
- "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
1708
- spellCheck: false,
1709
- className: `block outline-none w-full min-h-[2.5rem] px-4 py-2 break-words ${blockStyles[block.type].className}`,
1710
- onInput: (e) => handleBlockTextChange(
1711
- block.id,
1712
- e.target.innerText
1713
- ),
1714
- onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
1715
- onFocus: () => handleFocus(block.id),
1716
- onBlur: () => handleBlur(block.id),
1717
- style: blockStyles[block.type].inputStyle
1718
- }
1719
- ),
1720
- focusedBlockId === block.id && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1721
- "div",
1722
- {
1723
- role: "listbox",
1724
- id: `suggestions-${block.id}`,
1725
- 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",
1726
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
1727
- (char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
1728
- ).map((char) => /* @__PURE__ */ jsxRuntime.jsxs(
1729
- "div",
1730
- {
1731
- role: "option",
1732
- className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
1733
- onMouseDown: (e) => {
1734
- e.preventDefault();
1735
- const element = refs.current[block.id];
1736
- if (element) {
1737
- element.innerText = char;
1738
- handleBlockTextChange(block.id, char);
1739
- element.focus();
1740
- const range = document.createRange();
1741
- const sel = window.getSelection();
1742
- range.selectNodeContents(element);
1743
- range.collapse(false);
1744
- sel == null ? void 0 : sel.removeAllRanges();
1745
- sel == null ? void 0 : sel.addRange(range);
1746
- }
1747
- handleBlur(block.id);
1748
- },
1749
- children: [
1750
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-blumine-500 transition-colors mr-3" }),
1751
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
1752
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
1753
- ]
1754
- },
1755
- char
1756
- )) })
1757
- }
1758
- ),
1759
- focusedBlockId === block.id && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
1760
- "div",
1761
- {
1762
- role: "listbox",
1763
- id: `extension-suggestions-${block.id}`,
1764
- 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",
1765
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
1766
- const openParenIndex = block.text.lastIndexOf("(");
1767
- const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
1768
- return ext.toUpperCase().includes(query);
1769
- }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
1770
- "div",
1771
- {
1772
- role: "option",
1773
- className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
1774
- onMouseDown: (e) => {
1775
- e.preventDefault();
1776
- handleSelectCharacterExtension(ext);
1777
- },
1778
- children: [
1779
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
1780
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
1781
- ]
1782
- },
1783
- ext
1784
- )) })
1785
- }
1786
- ),
1787
- focusedBlockId === block.id && !enhancingBlockId && (block.type === "ACTION" || block.type === "DIALOGUE") && /* @__PURE__ */ jsxRuntime.jsx(
1788
- "button",
1789
- {
1790
- onClick: () => handleEnhance(block),
1791
- className: "absolute -right-12 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-xl border border-blumine-200/50 bg-white text-blumine-500 hover:border-blumine-400/60 hover:bg-blumine-50/90 hover:ring-2 hover:ring-blumine-100 hover:scale-105 active:scale-95 transition-all duration-200 group/enhance animate-in fade-in slide-in-from-left-2",
1792
- title: "Enhance with AI",
1793
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 group-hover/enhance:animate-pulse transition-colors" })
1794
- }
1795
- ),
1796
- enhancingBlockId === block.id && (enhancementSuggestion || isEnhancing) && /* @__PURE__ */ jsxRuntime.jsxs(
1797
- "div",
1798
- {
1799
- className: "absolute left-0 right-0 -top-4 -translate-y-full z-[50] animate-in fade-in zoom-in-95 slide-in-from-bottom-4 duration-300",
1800
- style: { width: "calc(100% + 2rem)", left: "-1rem" },
1801
- children: [
1802
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full rounded-[2rem] bg-white border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.1),0_2px_8px_rgba(16,37,54,0.05)] backdrop-blur-xl p-2 select-none transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
1803
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-1", children: [
1804
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
1805
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-full bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4" }) }),
1806
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1807
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-bold text-zinc-900 uppercase tracking-wider leading-none", children: "AI Suggestion" }),
1808
- !isEnhancing && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-zinc-500 mt-1 font-medium", children: "Refining your screenplay dialogue" })
1809
- ] })
1810
- ] }),
1811
- !isEnhancing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
1812
- /* @__PURE__ */ jsxRuntime.jsx(
1813
- "button",
1814
- {
1815
- onClick: handleRejectEnhance,
1816
- className: "px-3 py-2 rounded-full text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95",
1817
- children: "Discard"
1818
- }
1819
- ),
1820
- /* @__PURE__ */ jsxRuntime.jsxs(
1821
- "button",
1822
- {
1823
- onClick: handleApproveEnhance,
1824
- className: "px-4 py-2 rounded-full text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/20 transition-all active:scale-95 flex items-center gap-1.5",
1825
- children: [
1826
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5" }),
1827
- "Apply Changes"
1828
- ]
1829
- }
1830
- )
1831
- ] })
1832
- ] }),
1833
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[1.25rem] bg-zinc-50/50 border border-zinc-100 p-4 min-h-[4rem]", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 py-1", children: [
1834
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-3/4 bg-zinc-200/60 animate-pulse rounded-full" }),
1835
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-1/2 bg-zinc-200/60 animate-pulse rounded-full" })
1836
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
1837
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-400 line-through decoration-zinc-300 italic", children: block.text }),
1838
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-800 font-medium leading-relaxed", children: enhancementSuggestion })
1839
- ] }) })
1840
- ] }) }),
1841
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white border-r border-b border-zinc-200/50 rotate-45" })
1842
- ]
1843
- }
1844
- ),
1845
- focusedBlockId === block.id && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1846
- PhoneticSuggestions,
1847
- {
1848
- suggestions: phoneticSuggestions,
1849
- onSelect: handleSelectPhoneticSuggestion
1850
- }
1851
- )
1852
- ] })
1853
- },
1854
- block.id + "-" + block.type
1855
- );
1856
- })
1735
+ children: blocks.map((block) => /* @__PURE__ */ jsxRuntime.jsx(
1736
+ ScreenplayBlockItem,
1737
+ {
1738
+ block,
1739
+ isFocused: focusedBlockId === block.id,
1740
+ isLocked,
1741
+ showSuggestions,
1742
+ showExtensionSuggestions,
1743
+ locations,
1744
+ characters,
1745
+ phoneticSuggestions,
1746
+ characterExtensions,
1747
+ enhancingBlockId,
1748
+ enhancementSuggestion,
1749
+ isEnhancing,
1750
+ currentLanguage,
1751
+ refs,
1752
+ handleSceneNumberChange,
1753
+ handleSceneTypeChange,
1754
+ handleTimeOfDayChange,
1755
+ handleBlockTextChange,
1756
+ handleKeyDown,
1757
+ handleFocus,
1758
+ handleBlur,
1759
+ handleSelectPhoneticSuggestion,
1760
+ handleSelectCharacterExtension,
1761
+ handleEnhance,
1762
+ handleApproveEnhance,
1763
+ handleRejectEnhance
1764
+ },
1765
+ block.id + "-" + block.type
1766
+ ))
1857
1767
  }
1858
- ) }),
1859
- /* @__PURE__ */ jsxRuntime.jsx(
1768
+ ) })
1769
+ ] });
1770
+ }
1771
+ var ScreenplayBlockItem = React4__default.default.memo(
1772
+ function ScreenplayBlockItem2({
1773
+ block,
1774
+ isFocused,
1775
+ isLocked,
1776
+ showSuggestions,
1777
+ showExtensionSuggestions,
1778
+ locations,
1779
+ characters,
1780
+ phoneticSuggestions,
1781
+ characterExtensions,
1782
+ enhancingBlockId,
1783
+ enhancementSuggestion,
1784
+ isEnhancing,
1785
+ currentLanguage,
1786
+ refs,
1787
+ handleSceneNumberChange,
1788
+ handleSceneTypeChange,
1789
+ handleTimeOfDayChange,
1790
+ handleBlockTextChange,
1791
+ handleKeyDown,
1792
+ handleFocus,
1793
+ handleBlur,
1794
+ handleSelectPhoneticSuggestion,
1795
+ handleSelectCharacterExtension,
1796
+ handleEnhance,
1797
+ handleApproveEnhance,
1798
+ handleRejectEnhance
1799
+ }) {
1800
+ var _a, _b;
1801
+ return /* @__PURE__ */ jsxRuntime.jsx(
1860
1802
  "div",
1861
1803
  {
1862
- className: `fixed bottom-10 -translate-x-1/2 z-[100] w-full max-w-[95%] sm:max-w-2xl transition-all duration-500 ease-in-out ${showUnsavedPopover ? "translate-y-0 opacity-100 scale-100" : "translate-y-12 opacity-0 scale-95 pointer-events-none"}`,
1863
- style: {
1864
- left: savePopOverLeft
1865
- },
1866
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto rounded-[2.5rem] bg-white/95 border border-white/60 shadow-[0_20px_50px_rgba(16,37,54,0.12),0_4px_12px_rgba(16,37,54,0.05)] backdrop-blur-2xl flex items-center justify-between px-2 py-1.5 sm:px-4 sm:py-2.5 select-none transition-all hover:shadow-[0_25px_60px_rgba(16,37,54,0.18)]", children: [
1867
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
1868
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center rounded-[2.5rem] bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-5 h-5" }) }),
1869
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-5", children: [
1870
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-zinc-900 leading-none", children: "Unsaved Changes" }),
1871
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-zinc-500 mt-1 font-medium", children: "You have changes that haven't been saved yet." })
1872
- ] })
1873
- ] }),
1874
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: [
1804
+ "data-block-id": block.id,
1805
+ className: `relative rounded-sm transition-all duration-200 outline-none ${isFocused ? "bg-zinc-100/50" : "bg-transparent"}`,
1806
+ "data-block-type": block.type,
1807
+ children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1808
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
1875
1809
  /* @__PURE__ */ jsxRuntime.jsx(
1876
- "button",
1810
+ "input",
1877
1811
  {
1878
- onClick: ignoreChanges,
1879
- className: "flex-1 sm:flex-none px-4 py-2 rounded-[2.5rem] text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95 whitespace-nowrap",
1880
- children: "Ignore"
1812
+ className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none bg-transparent outline-none focus:ring-1 focus:ring-blue-400 rounded-sm",
1813
+ spellCheck: false,
1814
+ disabled: isLocked,
1815
+ value: block.sceneNumber || "",
1816
+ onChange: (e) => handleSceneNumberChange(
1817
+ block.id,
1818
+ e.target.value.toUpperCase()
1819
+ ),
1820
+ onFocus: () => handleFocus(block.id),
1821
+ onBlur: () => handleBlur(block.id),
1822
+ onKeyDown: (e) => {
1823
+ if (e.key === "Enter" || e.key === "Backspace") {
1824
+ e.stopPropagation();
1825
+ }
1826
+ },
1827
+ "aria-label": "Scene Number"
1881
1828
  }
1882
1829
  ),
1883
1830
  /* @__PURE__ */ jsxRuntime.jsxs(
1884
- "button",
1831
+ "select",
1885
1832
  {
1886
- onClick: syncScreenplay,
1887
- className: "flex-1 sm:flex-none px-5 py-2 rounded-[2.5rem] text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/25 transition-all active:scale-95 flex items-center justify-center gap-2 whitespace-nowrap",
1833
+ 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",
1834
+ "aria-label": "Scene Type",
1835
+ disabled: isLocked,
1836
+ value: (_a = block.sceneType) != null ? _a : "INT.",
1837
+ onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
1838
+ style: {
1839
+ appearance: "none"
1840
+ },
1888
1841
  children: [
1889
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-4 h-4" }),
1890
- "Sync to Cloud"
1842
+ /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT." }),
1843
+ /* @__PURE__ */ jsxRuntime.jsx("option", { children: "EXT." }),
1844
+ /* @__PURE__ */ jsxRuntime.jsx("option", { children: "INT/EXT." })
1891
1845
  ]
1892
1846
  }
1847
+ ),
1848
+ /* @__PURE__ */ jsxRuntime.jsx(
1849
+ "div",
1850
+ {
1851
+ ref: (el) => {
1852
+ if (!el) return;
1853
+ refs.current[block.id] = el;
1854
+ },
1855
+ contentEditable: !isLocked,
1856
+ suppressContentEditableWarning: true,
1857
+ "aria-label": `Scene Heading: ${block.text}`,
1858
+ "aria-haspopup": "listbox",
1859
+ "aria-expanded": isFocused && showSuggestions && locations.length > 0,
1860
+ spellCheck: false,
1861
+ className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
1862
+ style: {
1863
+ minWidth: "3rem"
1864
+ },
1865
+ onInput: (e) => handleBlockTextChange(
1866
+ block.id,
1867
+ e.target.innerText
1868
+ ),
1869
+ onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
1870
+ onFocus: () => handleFocus(block.id),
1871
+ onBlur: () => handleBlur(block.id)
1872
+ }
1873
+ ),
1874
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
1875
+ /* @__PURE__ */ jsxRuntime.jsx(
1876
+ "select",
1877
+ {
1878
+ 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",
1879
+ "aria-label": "Time of Day",
1880
+ disabled: isLocked,
1881
+ value: (_b = block.timeOfDay) != null ? _b : "DAY",
1882
+ style: {
1883
+ appearance: "none"
1884
+ },
1885
+ onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
1886
+ children: timeOfDayOptions.map((t) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: t }, t))
1887
+ }
1893
1888
  )
1894
- ] })
1889
+ ] }),
1890
+ isFocused && showSuggestions && locations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1891
+ "div",
1892
+ {
1893
+ role: "listbox",
1894
+ id: `suggestions-${block.id}`,
1895
+ 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",
1896
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
1897
+ (loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
1898
+ ).map((loc) => /* @__PURE__ */ jsxRuntime.jsxs(
1899
+ "div",
1900
+ {
1901
+ role: "option",
1902
+ 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",
1903
+ onMouseDown: (e) => {
1904
+ e.preventDefault();
1905
+ const element = refs.current[block.id];
1906
+ if (element) {
1907
+ element.innerText = loc;
1908
+ handleBlockTextChange(block.id, loc);
1909
+ element.focus();
1910
+ const range = document.createRange();
1911
+ const sel = window.getSelection();
1912
+ range.selectNodeContents(element);
1913
+ range.collapse(false);
1914
+ sel == null ? void 0 : sel.removeAllRanges();
1915
+ sel == null ? void 0 : sel.addRange(range);
1916
+ }
1917
+ handleBlur(block.id);
1918
+ },
1919
+ children: [
1920
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
1921
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
1922
+ ]
1923
+ },
1924
+ loc
1925
+ )) })
1926
+ }
1927
+ ),
1928
+ isFocused && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1929
+ PhoneticSuggestions,
1930
+ {
1931
+ suggestions: phoneticSuggestions,
1932
+ onSelect: handleSelectPhoneticSuggestion
1933
+ }
1934
+ )
1935
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1936
+ /* @__PURE__ */ jsxRuntime.jsx(
1937
+ "div",
1938
+ {
1939
+ ref: (el) => {
1940
+ if (!el) return;
1941
+ refs.current[block.id] = el;
1942
+ },
1943
+ contentEditable: !isLocked,
1944
+ suppressContentEditableWarning: true,
1945
+ "aria-label": `${blockStyles[block.type].label} text`,
1946
+ "aria-multiline": block.type === "ACTION" || block.type === "DIALOGUE",
1947
+ spellCheck: false,
1948
+ className: `block outline-none w-full min-h-[2.5rem] px-4 py-2 break-words ${blockStyles[block.type].className}`,
1949
+ onInput: (e) => handleBlockTextChange(
1950
+ block.id,
1951
+ e.target.innerText
1952
+ ),
1953
+ onKeyDown: (e) => handleKeyDown(e, block.id, block.text),
1954
+ onFocus: () => handleFocus(block.id),
1955
+ onBlur: () => handleBlur(block.id),
1956
+ style: blockStyles[block.type].inputStyle
1957
+ }
1958
+ ),
1959
+ isFocused && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1960
+ "div",
1961
+ {
1962
+ role: "listbox",
1963
+ id: `suggestions-${block.id}`,
1964
+ 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",
1965
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
1966
+ (char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
1967
+ ).map((char) => /* @__PURE__ */ jsxRuntime.jsxs(
1968
+ "div",
1969
+ {
1970
+ role: "option",
1971
+ className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
1972
+ onMouseDown: (e) => {
1973
+ e.preventDefault();
1974
+ const element = refs.current[block.id];
1975
+ if (element) {
1976
+ element.innerText = char;
1977
+ handleBlockTextChange(block.id, char);
1978
+ element.focus();
1979
+ const range = document.createRange();
1980
+ const sel = window.getSelection();
1981
+ range.selectNodeContents(element);
1982
+ range.collapse(false);
1983
+ sel == null ? void 0 : sel.removeAllRanges();
1984
+ sel == null ? void 0 : sel.addRange(range);
1985
+ }
1986
+ handleBlur(block.id);
1987
+ },
1988
+ children: [
1989
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-blumine-500 transition-colors mr-3" }),
1990
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
1991
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
1992
+ ]
1993
+ },
1994
+ char
1995
+ )) })
1996
+ }
1997
+ ),
1998
+ isFocused && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
1999
+ "div",
2000
+ {
2001
+ role: "listbox",
2002
+ id: `extension-suggestions-${block.id}`,
2003
+ 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",
2004
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
2005
+ const openParenIndex = block.text.lastIndexOf("(");
2006
+ const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
2007
+ return ext.toUpperCase().includes(query);
2008
+ }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
2009
+ "div",
2010
+ {
2011
+ role: "option",
2012
+ className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
2013
+ onMouseDown: (e) => {
2014
+ e.preventDefault();
2015
+ handleSelectCharacterExtension(ext);
2016
+ },
2017
+ children: [
2018
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
2019
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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" })
2020
+ ]
2021
+ },
2022
+ ext
2023
+ )) })
2024
+ }
2025
+ ),
2026
+ isFocused && !enhancingBlockId && (block.type === "ACTION" || block.type === "DIALOGUE") && /* @__PURE__ */ jsxRuntime.jsx(
2027
+ "button",
2028
+ {
2029
+ onClick: () => handleEnhance(block),
2030
+ className: "absolute -right-12 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-xl border border-blumine-200/50 bg-white text-blumine-500 hover:border-blumine-400/60 hover:bg-blumine-50/90 hover:ring-2 hover:ring-blumine-100 hover:scale-105 active:scale-95 transition-all duration-200 group/enhance animate-in fade-in slide-in-from-left-2",
2031
+ title: "Enhance with AI",
2032
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 group-hover/enhance:animate-pulse transition-colors" })
2033
+ }
2034
+ ),
2035
+ enhancingBlockId === block.id && (enhancementSuggestion || isEnhancing) && /* @__PURE__ */ jsxRuntime.jsxs(
2036
+ "div",
2037
+ {
2038
+ className: "absolute left-0 right-0 -top-4 -translate-y-full z-[50] animate-in fade-in zoom-in-95 slide-in-from-bottom-4 duration-300",
2039
+ style: { width: "calc(100% + 2rem)", left: "-1rem" },
2040
+ children: [
2041
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full rounded-[2rem] bg-white border border-white/60 shadow-[0_14px_34px_rgba(16,37,54,0.1),0_2px_8px_rgba(16,37,54,0.05)] backdrop-blur-xl p-2 select-none transition-all", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
2042
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-1", children: [
2043
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2044
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 flex items-center justify-center rounded-full bg-blumine-50 text-blumine-500 border border-blumine-100 shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4" }) }),
2045
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2046
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-bold text-zinc-900 uppercase tracking-wider leading-none", children: "AI Suggestion" }),
2047
+ !isEnhancing && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-zinc-500 mt-1 font-medium", children: "Refining your screenplay dialogue" })
2048
+ ] })
2049
+ ] }),
2050
+ !isEnhancing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
2051
+ /* @__PURE__ */ jsxRuntime.jsx(
2052
+ "button",
2053
+ {
2054
+ onClick: handleRejectEnhance,
2055
+ className: "px-3 py-2 rounded-full text-xs font-bold text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all active:scale-95",
2056
+ children: "Discard"
2057
+ }
2058
+ ),
2059
+ /* @__PURE__ */ jsxRuntime.jsxs(
2060
+ "button",
2061
+ {
2062
+ onClick: handleApproveEnhance,
2063
+ className: "px-4 py-2 rounded-full text-xs font-bold bg-blumine-500 text-white hover:bg-blumine-600 shadow-lg shadow-blumine-500/20 transition-all active:scale-95 flex items-center gap-1.5",
2064
+ children: [
2065
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5" }),
2066
+ "Apply Changes"
2067
+ ]
2068
+ }
2069
+ )
2070
+ ] })
2071
+ ] }),
2072
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[1.25rem] bg-zinc-50/50 border border-zinc-100 p-4 min-h-[4rem]", children: isEnhancing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 py-1", children: [
2073
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-3/4 bg-zinc-200/60 animate-pulse rounded-full" }),
2074
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-1/2 bg-zinc-200/60 animate-pulse rounded-full" })
2075
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
2076
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-400 line-through decoration-zinc-300 italic", children: block.text }),
2077
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-800 font-medium leading-relaxed", children: enhancementSuggestion })
2078
+ ] }) })
2079
+ ] }) }),
2080
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white border-r border-b border-zinc-200/50 rotate-45" })
2081
+ ]
2082
+ }
2083
+ ),
2084
+ isFocused && phoneticSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
2085
+ PhoneticSuggestions,
2086
+ {
2087
+ suggestions: phoneticSuggestions,
2088
+ onSelect: handleSelectPhoneticSuggestion
2089
+ }
2090
+ )
1895
2091
  ] })
1896
2092
  }
1897
- )
1898
- ] });
1899
- }
2093
+ );
2094
+ },
2095
+ (prevProps, nextProps) => {
2096
+ return prevProps.isLocked === nextProps.isLocked && prevProps.isFocused === nextProps.isFocused && prevProps.currentLanguage === nextProps.currentLanguage && prevProps.enhancingBlockId === nextProps.enhancingBlockId && prevProps.isEnhancing === nextProps.isEnhancing && prevProps.enhancementSuggestion === nextProps.enhancementSuggestion && prevProps.block.text === nextProps.block.text && prevProps.block.type === nextProps.block.type && prevProps.block.sceneNumber === nextProps.block.sceneNumber && prevProps.block.sceneType === nextProps.block.sceneType && prevProps.block.timeOfDay === nextProps.block.timeOfDay && (!nextProps.isFocused || prevProps.showSuggestions === nextProps.showSuggestions && prevProps.showExtensionSuggestions === nextProps.showExtensionSuggestions && prevProps.phoneticSuggestions === nextProps.phoneticSuggestions && prevProps.locations === nextProps.locations && prevProps.characters === nextProps.characters);
2097
+ }
2098
+ );
1900
2099
 
1901
2100
  // app/service/screenplay-editor.service.ts
1902
2101
  function getNextBlockType(currentType) {
@@ -2224,7 +2423,25 @@ function createRangeFromGlobalOffset(element, startOffset, endOffset) {
2224
2423
  return null;
2225
2424
  }
2226
2425
  function useScreenplayEditor(options) {
2227
- const [blocks, setBlocks] = React4.useState(initialBlocks);
2426
+ var _a;
2427
+ const [blocks, setBlocks] = React4.useState(
2428
+ (options == null ? void 0 : options.blocks) || initialBlocks || []
2429
+ );
2430
+ const hasInitializedRef = React4.useRef(
2431
+ !!((options == null ? void 0 : options.blocks) && options.blocks.length > 0)
2432
+ );
2433
+ React4.useEffect(() => {
2434
+ if ((options == null ? void 0 : options.blocks) && options.blocks.length > 0 && !hasInitializedRef.current) {
2435
+ setIsLoading(true);
2436
+ isWaitingForDOMRef.current = true;
2437
+ skipAutosaveRef.current = true;
2438
+ const timer = setTimeout(() => {
2439
+ setBlocks(options.blocks);
2440
+ hasInitializedRef.current = true;
2441
+ }, 50);
2442
+ return () => clearTimeout(timer);
2443
+ }
2444
+ }, [options == null ? void 0 : options.blocks]);
2228
2445
  const refs = React4.useRef({});
2229
2446
  const [focusedBlockId, setFocusedBlockId] = React4.useState(
2230
2447
  initialBlocks[0].id
@@ -2232,7 +2449,9 @@ function useScreenplayEditor(options) {
2232
2449
  const [newBlockId, setNewBlockId] = React4.useState(null);
2233
2450
  const [showSuggestions, setShowSuggestions] = React4.useState(false);
2234
2451
  const [showExtensionSuggestions, setShowExtensionSuggestions] = React4.useState(false);
2235
- const [isLoading, setIsLoading] = React4.useState(!!(options == null ? void 0 : options.initialUrl));
2452
+ const [isLoading, setIsLoading] = React4.useState(
2453
+ !!((options == null ? void 0 : options.initialUrl) || (options == null ? void 0 : options.blocks) && options.blocks.length > 0)
2454
+ );
2236
2455
  const [enhancingBlockId, setEnhancingBlockId] = React4.useState(null);
2237
2456
  const [enhancementSuggestion, setEnhancementSuggestion] = React4.useState(null);
2238
2457
  const [isEnhancing, setIsEnhancing] = React4.useState(false);
@@ -2241,13 +2460,21 @@ function useScreenplayEditor(options) {
2241
2460
  const popoverTimeoutRef = React4.useRef(null);
2242
2461
  const blurTimeout = React4.useRef(null);
2243
2462
  const isInitialLoadRef = React4.useRef(true);
2463
+ const skipAutosaveRef = React4.useRef(false);
2464
+ const isWaitingForDOMRef = React4.useRef(
2465
+ !!((options == null ? void 0 : options.initialUrl) || (options == null ? void 0 : options.blocks) && options.blocks.length > 0)
2466
+ );
2244
2467
  const loadedUrlRef = React4.useRef(null);
2245
2468
  const lastSavedContent = React4.useRef(null);
2246
2469
  const onSaveRef = React4.useRef(options == null ? void 0 : options.onSave);
2470
+ const onSaveBlobRef = React4.useRef(options == null ? void 0 : options.onSaveBlob);
2247
2471
  const onSyncWithCloudRef = React4.useRef(options == null ? void 0 : options.onSyncWithCloud);
2472
+ const [autosaveStatus, setAutosaveStatus] = React4.useState("idle");
2473
+ const isLocked = (_a = options == null ? void 0 : options.isLocked) != null ? _a : false;
2248
2474
  const [currentLanguage, setCurrentLanguage] = React4.useState("English");
2249
2475
  const [lastPhoneticAction, setLastPhoneticAction] = React4.useState(null);
2250
2476
  const [phoneticSuggestions, setPhoneticSuggestions] = React4.useState([]);
2477
+ const lastSyncedTextRef = React4.useRef({});
2251
2478
  React4.useEffect(() => {
2252
2479
  setLastPhoneticAction(null);
2253
2480
  setPhoneticSuggestions([]);
@@ -2260,8 +2487,75 @@ function useScreenplayEditor(options) {
2260
2487
  }, [currentLanguage]);
2261
2488
  React4.useEffect(() => {
2262
2489
  onSaveRef.current = options == null ? void 0 : options.onSave;
2490
+ onSaveBlobRef.current = options == null ? void 0 : options.onSaveBlob;
2263
2491
  onSyncWithCloudRef.current = options == null ? void 0 : options.onSyncWithCloud;
2264
- }, [options == null ? void 0 : options.onSave, options == null ? void 0 : options.onSyncWithCloud]);
2492
+ }, [options == null ? void 0 : options.onSave, options == null ? void 0 : options.onSaveBlob, options == null ? void 0 : options.onSyncWithCloud]);
2493
+ const isFirstAutosaveRender = React4.useRef(true);
2494
+ const prevBlocksRef = React4.useRef(blocks);
2495
+ React4.useEffect(() => {
2496
+ if (isLocked) {
2497
+ setAutosaveStatus("idle");
2498
+ return;
2499
+ }
2500
+ if (isFirstAutosaveRender.current) {
2501
+ isFirstAutosaveRender.current = false;
2502
+ prevBlocksRef.current = blocks;
2503
+ return;
2504
+ }
2505
+ if (skipAutosaveRef.current) {
2506
+ skipAutosaveRef.current = false;
2507
+ prevBlocksRef.current = blocks;
2508
+ return;
2509
+ }
2510
+ const hasChanged = blocks.length !== prevBlocksRef.current.length || blocks.some((b, i) => b !== prevBlocksRef.current[i]);
2511
+ if (!hasChanged) {
2512
+ return;
2513
+ }
2514
+ setAutosaveStatus("typing");
2515
+ prevBlocksRef.current = blocks;
2516
+ const timer = setTimeout(async () => {
2517
+ if (onSaveRef.current) {
2518
+ setAutosaveStatus("saving");
2519
+ try {
2520
+ await onSaveRef.current(blocks);
2521
+ setAutosaveStatus("saved");
2522
+ setTimeout(() => {
2523
+ setAutosaveStatus((prev) => prev === "saved" ? "idle" : prev);
2524
+ }, 2e3);
2525
+ } catch (error) {
2526
+ console.error("Autosave failed:", error);
2527
+ setAutosaveStatus("error");
2528
+ }
2529
+ } else {
2530
+ setAutosaveStatus("idle");
2531
+ }
2532
+ }, 3e3);
2533
+ return () => clearTimeout(timer);
2534
+ }, [blocks, isLocked]);
2535
+ const latestBlocksRef = React4.useRef(blocks);
2536
+ React4.useEffect(() => {
2537
+ latestBlocksRef.current = blocks;
2538
+ }, [blocks]);
2539
+ React4.useEffect(() => {
2540
+ const handleBeforeUnload = (e) => {
2541
+ if (autosaveStatus === "typing" || autosaveStatus === "saving") {
2542
+ e.preventDefault();
2543
+ e.returnValue = "Changes you made may not be saved.";
2544
+ return e.returnValue;
2545
+ }
2546
+ };
2547
+ window.addEventListener("beforeunload", handleBeforeUnload);
2548
+ return () => {
2549
+ window.removeEventListener("beforeunload", handleBeforeUnload);
2550
+ };
2551
+ }, [autosaveStatus]);
2552
+ React4.useEffect(() => {
2553
+ return () => {
2554
+ if (autosaveStatus === "typing" && onSaveRef.current) {
2555
+ onSaveRef.current(latestBlocksRef.current);
2556
+ }
2557
+ };
2558
+ }, [autosaveStatus]);
2265
2559
  const characterExtensions = React4.useMemo(
2266
2560
  () => ["(V.O.)", "(O.S.)", "(O.C.)", "(SUBTITLE)", "(CONT'D)"],
2267
2561
  []
@@ -2276,37 +2570,43 @@ function useScreenplayEditor(options) {
2276
2570
  },
2277
2571
  []
2278
2572
  );
2279
- const locations = React4.useMemo(() => {
2280
- const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
2281
- return [...new Set(locs)];
2282
- }, [blocks]);
2283
- const characters = React4.useMemo(() => {
2284
- const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => {
2285
- const text = b.text.trim().toUpperCase();
2286
- const parenIndex = text.indexOf("(");
2287
- if (parenIndex > -1) {
2288
- return text.substring(0, parenIndex).trim();
2289
- }
2290
- return text;
2291
- }).filter(Boolean);
2292
- return [...new Set(chars)];
2293
- }, [blocks]);
2294
- const sceneNumbers = React4.useMemo(() => {
2295
- const map = {};
2573
+ const { locations, characters, sceneNumbers } = React4.useMemo(() => {
2574
+ const locsSet = /* @__PURE__ */ new Set();
2575
+ const charsSet = /* @__PURE__ */ new Set();
2576
+ const sceneNumMap = {};
2296
2577
  let fallbackCount = 0;
2297
2578
  blocks.forEach((block) => {
2579
+ const textTrim = block.text.trim();
2298
2580
  if (block.type === "SCENE_HEADING") {
2581
+ if (textTrim !== "") {
2582
+ locsSet.add(textTrim.toUpperCase());
2583
+ }
2299
2584
  if (block.sceneNumber) {
2300
- map[block.id] = block.sceneNumber;
2585
+ sceneNumMap[block.id] = block.sceneNumber;
2301
2586
  const base = parseInt(block.sceneNumber);
2302
2587
  if (!isNaN(base)) fallbackCount = Math.max(fallbackCount, base);
2303
2588
  } else {
2304
2589
  fallbackCount++;
2305
- map[block.id] = String(fallbackCount);
2590
+ sceneNumMap[block.id] = String(fallbackCount);
2591
+ }
2592
+ } else if (block.type === "CHARACTER") {
2593
+ if (textTrim !== "") {
2594
+ const textUpper = textTrim.toUpperCase();
2595
+ const parenIndex = textUpper.indexOf("(");
2596
+ if (parenIndex > -1) {
2597
+ const charName = textUpper.substring(0, parenIndex).trim();
2598
+ if (charName) charsSet.add(charName);
2599
+ } else {
2600
+ charsSet.add(textUpper);
2601
+ }
2306
2602
  }
2307
2603
  }
2308
2604
  });
2309
- return map;
2605
+ return {
2606
+ locations: Array.from(locsSet),
2607
+ characters: Array.from(charsSet),
2608
+ sceneNumbers: sceneNumMap
2609
+ };
2310
2610
  }, [blocks]);
2311
2611
  React4.useEffect(() => {
2312
2612
  if (newBlockId && refs.current[newBlockId]) {
@@ -2314,7 +2614,8 @@ function useScreenplayEditor(options) {
2314
2614
  const el = refs.current[newBlockId];
2315
2615
  if (el && block) {
2316
2616
  el.focus();
2317
- el.innerText = block.text;
2617
+ el.textContent = block.text;
2618
+ lastSyncedTextRef.current[newBlockId] = block.text;
2318
2619
  if (block.type === "PARENTHETICAL") {
2319
2620
  setTimeout(() => setCaretPosition(el, 1), 0);
2320
2621
  } else {
@@ -2329,11 +2630,51 @@ function useScreenplayEditor(options) {
2329
2630
  blocks.forEach((block) => {
2330
2631
  const element = refs.current[block.id];
2331
2632
  if (element) {
2332
- if (element.innerText !== block.text && document.activeElement !== element) {
2333
- element.innerText = block.text;
2633
+ if (lastSyncedTextRef.current[block.id] !== block.text && document.activeElement !== element) {
2634
+ element.textContent = block.text;
2635
+ lastSyncedTextRef.current[block.id] = block.text;
2334
2636
  }
2335
2637
  }
2336
2638
  });
2639
+ if (isWaitingForDOMRef.current) {
2640
+ const dismissLoader = () => {
2641
+ if (typeof window !== "undefined") {
2642
+ void document.body.scrollHeight;
2643
+ }
2644
+ setIsLoading(false);
2645
+ isWaitingForDOMRef.current = false;
2646
+ };
2647
+ const waitForAllReady = async () => {
2648
+ if (typeof window !== "undefined") {
2649
+ try {
2650
+ if (document.fonts && document.fonts.ready) {
2651
+ await document.fonts.ready;
2652
+ }
2653
+ } catch (e) {
2654
+ console.error("Font loading detection failed:", e);
2655
+ }
2656
+ }
2657
+ if (typeof window !== "undefined" && "requestIdleCallback" in window) {
2658
+ requestAnimationFrame(() => {
2659
+ requestAnimationFrame(() => {
2660
+ window.requestIdleCallback(
2661
+ () => {
2662
+ setTimeout(dismissLoader, 150);
2663
+ },
2664
+ { timeout: 2e3 }
2665
+ );
2666
+ });
2667
+ });
2668
+ } else {
2669
+ requestAnimationFrame(() => {
2670
+ requestAnimationFrame(() => {
2671
+ setTimeout(dismissLoader, 400);
2672
+ });
2673
+ });
2674
+ }
2675
+ };
2676
+ waitForAllReady();
2677
+ }
2337
2678
  }, [blocks]);
2338
2679
  React4.useEffect(() => {
2339
2680
  const handleClickOutside = (e) => {
@@ -2389,9 +2730,12 @@ function useScreenplayEditor(options) {
2389
2730
  const offset = getCaretCharacterOffsetWithin(el);
2390
2731
  const charsBeforeCaret = text.substring(0, offset).replace(/[()]/g, "").length;
2391
2732
  const newOffset = 1 + charsBeforeCaret;
2392
- el.innerText = processedText;
2733
+ el.textContent = processedText;
2734
+ lastSyncedTextRef.current[id] = processedText;
2393
2735
  setCaretPosition(el, newOffset);
2394
2736
  }
2737
+ } else {
2738
+ lastSyncedTextRef.current[id] = text;
2395
2739
  }
2396
2740
  },
2397
2741
  [blocks, showExtensionSuggestions]
@@ -2402,8 +2746,8 @@ function useScreenplayEditor(options) {
2402
2746
  (bs) => updateBlock(bs, id, "sceneType", sceneType)
2403
2747
  );
2404
2748
  setTimeout(() => {
2405
- var _a;
2406
- (_a = refs.current[id]) == null ? void 0 : _a.focus();
2749
+ var _a2;
2750
+ (_a2 = refs.current[id]) == null ? void 0 : _a2.focus();
2407
2751
  setFocusedBlockId(id);
2408
2752
  }, 10);
2409
2753
  },
@@ -2412,8 +2756,8 @@ function useScreenplayEditor(options) {
2412
2756
  const handleTimeOfDayChange = React4.useCallback((id, time) => {
2413
2757
  setBlocks((bs) => updateBlock(bs, id, "timeOfDay", time));
2414
2758
  setTimeout(() => {
2415
- var _a;
2416
- (_a = refs.current[id]) == null ? void 0 : _a.focus();
2759
+ var _a2;
2760
+ (_a2 = refs.current[id]) == null ? void 0 : _a2.focus();
2417
2761
  setFocusedBlockId(id);
2418
2762
  }, 10);
2419
2763
  }, []);
@@ -2514,7 +2858,7 @@ function useScreenplayEditor(options) {
2514
2858
  };
2515
2859
  const handleKeyDown = React4.useCallback(
2516
2860
  (e, id, text) => {
2517
- var _a;
2861
+ var _a2;
2518
2862
  if (currentLanguage !== "English") {
2519
2863
  const config = LANGUAGE_CONFIGS[currentLanguage];
2520
2864
  const char = getMappedCharacter(
@@ -2681,7 +3025,7 @@ function useScreenplayEditor(options) {
2681
3025
  const range = selection.getRangeAt(0);
2682
3026
  const contentEditable = e.currentTarget;
2683
3027
  const container = range.endContainer;
2684
- const isAtEndOffset = range.endOffset === (container.nodeType === Node.TEXT_NODE ? (_a = container.textContent) == null ? void 0 : _a.length : container.childNodes.length);
3028
+ const isAtEndOffset = range.endOffset === (container.nodeType === Node.TEXT_NODE ? (_a2 = container.textContent) == null ? void 0 : _a2.length : container.childNodes.length);
2685
3029
  if (isAtEndOffset) {
2686
3030
  let atEnd = false;
2687
3031
  let node = container;
@@ -2737,6 +3081,9 @@ function useScreenplayEditor(options) {
2737
3081
  parsedBlocks = parseScreenplayText(content);
2738
3082
  }
2739
3083
  if (parsedBlocks.length > 0) {
3084
+ setIsLoading(true);
3085
+ isWaitingForDOMRef.current = true;
3086
+ skipAutosaveRef.current = true;
2740
3087
  let fallbackCount = 1;
2741
3088
  const finalizedBlocks = parsedBlocks.map((block) => {
2742
3089
  if (block.type === "SCENE_HEADING") {
@@ -2751,25 +3098,30 @@ function useScreenplayEditor(options) {
2751
3098
  }
2752
3099
  return block;
2753
3100
  });
2754
- setBlocks(finalizedBlocks);
2755
- if (onSaveRef.current) {
2756
- const sbxData = serializeToSbx(finalizedBlocks);
2757
- if (sbxData !== lastSavedContent.current) {
2758
- lastSavedContent.current = sbxData;
2759
- if (!isInitialLoad) {
2760
- const blob = new Blob([sbxData], { type: "text/plain" });
2761
- onSaveRef.current(blob);
2762
- }
2763
- }
2764
- }
2765
3101
  setTimeout(() => {
2766
- var _a;
2767
- const firstId = parsedBlocks[0].id;
2768
- if (firstId && refs.current[firstId]) {
2769
- setFocusedBlockId(firstId);
2770
- (_a = refs.current[firstId]) == null ? void 0 : _a.focus();
3102
+ setBlocks(finalizedBlocks);
3103
+ if (onSaveBlobRef.current) {
3104
+ const sbxData = serializeToSbx(finalizedBlocks);
3105
+ if (sbxData !== lastSavedContent.current) {
3106
+ lastSavedContent.current = sbxData;
3107
+ if (!isInitialLoad) {
3108
+ const blob = new Blob([sbxData], { type: "text/plain" });
3109
+ onSaveBlobRef.current(blob);
3110
+ }
3111
+ }
2771
3112
  }
2772
- }, 100);
3113
+ setTimeout(() => {
3114
+ var _a2;
3115
+ const firstId = parsedBlocks[0].id;
3116
+ if (firstId && refs.current[firstId]) {
3117
+ setFocusedBlockId(firstId);
3118
+ (_a2 = refs.current[firstId]) == null ? void 0 : _a2.focus();
3119
+ }
3120
+ }, 100);
3121
+ }, 50);
3122
+ } else {
3123
+ setIsLoading(false);
3124
+ isWaitingForDOMRef.current = false;
2773
3125
  }
2774
3126
  },
2775
3127
  [refs]
@@ -2840,7 +3192,7 @@ function useScreenplayEditor(options) {
2840
3192
  }, []);
2841
3193
  const loadFromUrl = React4.useCallback(
2842
3194
  async (url, fetchOptions = {}, isInitialLoad) => {
2843
- var _a;
3195
+ var _a2;
2844
3196
  setIsLoading(true);
2845
3197
  try {
2846
3198
  const response = await fetch(url, fetchOptions);
@@ -2852,7 +3204,15 @@ function useScreenplayEditor(options) {
2852
3204
  let text = await response.text();
2853
3205
  let preParsedBlocks = void 0;
2854
3206
  let scriptContent = text;
2855
- if (text.includes('class="divtype') || url.toLowerCase().includes(".sbx")) {
3207
+ try {
3208
+ const parsed = JSON.parse(text);
3209
+ if (Array.isArray(parsed)) {
3210
+ preParsedBlocks = parsed;
3211
+ scriptContent = "";
3212
+ }
3213
+ } catch (e) {
3214
+ }
3215
+ if (!preParsedBlocks && (text.includes('class="divtype') || url.toLowerCase().includes(".sbx"))) {
2856
3216
  if (text.includes("<div")) {
2857
3217
  const textarea = document.createElement("textarea");
2858
3218
  textarea.innerHTML = text;
@@ -2871,8 +3231,8 @@ function useScreenplayEditor(options) {
2871
3231
  divtype6: "TRANSITION"
2872
3232
  };
2873
3233
  divs.forEach((div) => {
2874
- var _a2;
2875
- let divText = ((_a2 = div.textContent) == null ? void 0 : _a2.trim()) || "";
3234
+ var _a3;
3235
+ let divText = ((_a3 = div.textContent) == null ? void 0 : _a3.trim()) || "";
2876
3236
  if (!divText) return;
2877
3237
  let type = "ACTION";
2878
3238
  for (const className of Array.from(div.classList)) {
@@ -2911,15 +3271,18 @@ function useScreenplayEditor(options) {
2911
3271
  scriptContent = "";
2912
3272
  }
2913
3273
  }
2914
- const filename = ((_a = url.split("/").pop()) == null ? void 0 : _a.replace(/\.sbx$/i, "")) || "Imported from URL";
3274
+ const filename = ((_a2 = url.split("/").pop()) == null ? void 0 : _a2.replace(/\.sbx$/i, "")) || "Imported from URL";
3275
+ isWaitingForDOMRef.current = true;
2915
3276
  handleScriptImport(
2916
3277
  filename,
2917
3278
  scriptContent,
2918
3279
  preParsedBlocks,
2919
3280
  isInitialLoad
2920
3281
  );
2921
- } finally {
3282
+ } catch (error) {
3283
+ console.error("Failed to load screenplay from URL:", error);
2922
3284
  setIsLoading(false);
3285
+ isWaitingForDOMRef.current = false;
2923
3286
  }
2924
3287
  },
2925
3288
  [handleScriptImport]
@@ -2929,28 +3292,45 @@ function useScreenplayEditor(options) {
2929
3292
  isInitialLoadRef.current = true;
2930
3293
  return;
2931
3294
  }
2932
- const currentSbx = serializeToSbx(blocks);
2933
- if (isInitialLoadRef.current) {
2934
- if (lastSavedContent.current === null) {
2935
- lastSavedContent.current = currentSbx;
3295
+ const handler = setTimeout(() => {
3296
+ const runSerialization = () => {
3297
+ const currentSbx = serializeToSbx(blocks);
3298
+ if (isInitialLoadRef.current) {
3299
+ if (lastSavedContent.current === null) {
3300
+ lastSavedContent.current = currentSbx;
3301
+ }
3302
+ isInitialLoadRef.current = false;
3303
+ return;
3304
+ }
3305
+ const hasActualChanges = lastSavedContent.current !== null && currentSbx !== lastSavedContent.current;
3306
+ if (hasActualChanges) {
3307
+ setHasUnsavedChanges(true);
3308
+ if (popoverTimeoutRef.current)
3309
+ clearTimeout(popoverTimeoutRef.current);
3310
+ setShowUnsavedPopover(false);
3311
+ popoverTimeoutRef.current = setTimeout(() => {
3312
+ setShowUnsavedPopover(true);
3313
+ }, 1e3);
3314
+ } else {
3315
+ setHasUnsavedChanges(false);
3316
+ setShowUnsavedPopover(false);
3317
+ if (popoverTimeoutRef.current)
3318
+ clearTimeout(popoverTimeoutRef.current);
3319
+ }
3320
+ };
3321
+ if (typeof window !== "undefined" && "requestIdleCallback" in window) {
3322
+ window.requestIdleCallback(
3323
+ () => {
3324
+ runSerialization();
3325
+ },
3326
+ { timeout: 1e3 }
3327
+ );
3328
+ } else {
3329
+ runSerialization();
2936
3330
  }
2937
- isInitialLoadRef.current = false;
2938
- return;
2939
- }
2940
- const hasActualChanges = lastSavedContent.current !== null && currentSbx !== lastSavedContent.current;
2941
- if (hasActualChanges) {
2942
- setHasUnsavedChanges(true);
2943
- if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
2944
- setShowUnsavedPopover(false);
2945
- popoverTimeoutRef.current = setTimeout(() => {
2946
- setShowUnsavedPopover(true);
2947
- }, 1e3);
2948
- } else {
2949
- setHasUnsavedChanges(false);
2950
- setShowUnsavedPopover(false);
2951
- if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
2952
- }
3331
+ }, 250);
2953
3332
  return () => {
3333
+ clearTimeout(handler);
2954
3334
  if (popoverTimeoutRef.current) clearTimeout(popoverTimeoutRef.current);
2955
3335
  };
2956
3336
  }, [blocks, isLoading]);
@@ -3040,7 +3420,9 @@ function useScreenplayEditor(options) {
3040
3420
  currentLanguage,
3041
3421
  setCurrentLanguage,
3042
3422
  phoneticSuggestions,
3043
- handleSelectPhoneticSuggestion
3423
+ handleSelectPhoneticSuggestion,
3424
+ isLocked,
3425
+ autosaveStatus
3044
3426
  };
3045
3427
  }
3046
3428