@vishu1301/script-writing 1.0.4 → 1.0.6

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.
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
2
- import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, ArrowRight, User, ChevronRight, Upload, Save, FileDown, RefreshCcw, Cog } from 'lucide-react';
2
+ import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, Upload, Save, FileDown, RefreshCcw, Cog, ArrowRight, User, ChevronRight, Loader2, AlignLeft, Tags, Plus, X } from 'lucide-react';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import * as pdfjs from 'pdfjs-dist';
5
5
  import jsPDF from 'jspdf';
@@ -334,51 +334,127 @@ function ScreenplayEditorView({
334
334
  }
335
335
  }, [COURIER_STACK]);
336
336
  return /* @__PURE__ */ jsxs(Fragment, { children: [
337
- /* @__PURE__ */ jsx(
337
+ /* @__PURE__ */ jsxs(
338
338
  "div",
339
339
  {
340
- className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar",
340
+ className: "sticky top-6 z-50 mx-auto bg-white/70 backdrop-blur-2xl border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-zinc-900/5 rounded-[2rem] flex items-center justify-between p-2 mb-12 select-none transition-all",
341
341
  style: {
342
- maxWidth: "1024px"
342
+ maxWidth: "1240px"
343
343
  },
344
- children: blockTypes.map((type) => {
345
- var _a;
346
- const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
347
- return /* @__PURE__ */ jsxs(
348
- "button",
349
- {
350
- type: "button",
351
- className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
352
- onClick: () => handleBlockTypeChange(type),
353
- children: [
354
- /* @__PURE__ */ jsx(
355
- "input",
356
- {
357
- type: "radio",
358
- name: "blockType",
359
- id: `block-type-${type}`,
360
- className: "sr-only",
361
- "aria-label": blockStyles[type].label,
362
- checked: selected,
363
- readOnly: true
364
- }
365
- ),
366
- /* @__PURE__ */ jsxs(
367
- "label",
368
- {
369
- htmlFor: `block-type-${type}`,
370
- className: "flex items-center gap-2 cursor-pointer",
371
- children: [
372
- icons[type],
373
- /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
374
- ]
375
- }
376
- )
377
- ]
378
- },
379
- type
380
- );
381
- })
344
+ children: [
345
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto custom-scrollbar pr-2 items-center", children: blockTypes.map((type) => {
346
+ var _a;
347
+ const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
348
+ return /* @__PURE__ */ jsxs(
349
+ "button",
350
+ {
351
+ type: "button",
352
+ className: `group flex items-center gap-2.5 px-4 py-2 rounded-full font-semibold text-sm transition-all duration-300 ease-out active:scale-95 ${selected ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
353
+ onClick: () => handleBlockTypeChange(type),
354
+ children: [
355
+ /* @__PURE__ */ jsx(
356
+ "input",
357
+ {
358
+ type: "radio",
359
+ name: "blockType",
360
+ id: `block-type-${type}`,
361
+ className: "sr-only",
362
+ "aria-label": blockStyles[type].label,
363
+ checked: selected,
364
+ readOnly: true
365
+ }
366
+ ),
367
+ /* @__PURE__ */ jsxs(
368
+ "label",
369
+ {
370
+ htmlFor: `block-type-${type}`,
371
+ className: "flex items-center gap-2 cursor-pointer pointer-events-none",
372
+ children: [
373
+ /* @__PURE__ */ jsx(
374
+ "div",
375
+ {
376
+ className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200`,
377
+ children: icons[type]
378
+ }
379
+ ),
380
+ /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline tracking-wide", children: blockStyles[type].label })
381
+ ]
382
+ }
383
+ )
384
+ ]
385
+ },
386
+ type
387
+ );
388
+ }) }),
389
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
390
+ /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
391
+ /* @__PURE__ */ jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsx(Upload, { className: "w-[18px] h-[18px]" }) }) }),
392
+ onSave && /* @__PURE__ */ jsx(
393
+ "button",
394
+ {
395
+ onClick: onSave,
396
+ className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
397
+ title: "Save Script",
398
+ "aria-label": "Save Script",
399
+ children: /* @__PURE__ */ jsx(Save, { className: "w-[18px] h-[18px]" })
400
+ }
401
+ ),
402
+ onSaveAsPdf && /* @__PURE__ */ jsx(
403
+ "button",
404
+ {
405
+ onClick: onSaveAsPdf,
406
+ className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
407
+ title: "Save as PDF",
408
+ "aria-label": "Save Script as PDF",
409
+ children: /* @__PURE__ */ jsx(FileDown, { className: "w-[18px] h-[18px]" })
410
+ }
411
+ ),
412
+ onSaveAsSbx && /* @__PURE__ */ jsx(
413
+ "button",
414
+ {
415
+ onClick: onSaveAsSbx,
416
+ className: "flex items-center justify-center w-10 h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
417
+ title: "Sync with Cloud (SBX)",
418
+ "aria-label": "Save Script as SBX",
419
+ children: /* @__PURE__ */ jsx(RefreshCcw, { className: "w-[18px] h-[18px]" })
420
+ }
421
+ ),
422
+ /* @__PURE__ */ jsx(
423
+ "button",
424
+ {
425
+ onClick: () => setIsRulesOpen(!isRulesOpen),
426
+ className: `flex items-center justify-center w-10 h-10 rounded-full transition-all duration-200 active:scale-95 ${isRulesOpen ? "bg-zinc-900 text-white shadow-md shadow-zinc-900/20" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
427
+ title: "Settings & Shortcuts",
428
+ "aria-label": "Toggle Settings",
429
+ children: /* @__PURE__ */ jsx(Cog, { className: "w-[18px] h-[18px]" })
430
+ }
431
+ ),
432
+ isRulesOpen && /* @__PURE__ */ jsxs("div", { className: "absolute top-[calc(100%+1rem)] right-0 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] ring-1 ring-zinc-900/5 p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-72 origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
433
+ /* @__PURE__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
434
+ /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
435
+ "Settings & Shortcuts"
436
+ ] }),
437
+ /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
438
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
439
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
440
+ /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Enter" })
441
+ ] }),
442
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
443
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
444
+ /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Backspace" })
445
+ ] }),
446
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
447
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
448
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
449
+ /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "Ctrl" }),
450
+ /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
451
+ /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-[11px] font-bold text-zinc-700 bg-white border border-zinc-200/80 shadow-[0_2px_4px_rgb(0,0,0,0.02)] rounded-md", children: "\u2191/\u2193" })
452
+ ] })
453
+ ] })
454
+ ] }) })
455
+ ] })
456
+ ] })
457
+ ]
382
458
  }
383
459
  ),
384
460
  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
@@ -616,79 +692,7 @@ function ScreenplayEditorView({
616
692
  );
617
693
  })
618
694
  }
619
- ) }),
620
- /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 flex flex-col items-end gap-4 z-50", children: [
621
- /* @__PURE__ */ jsx(PdfImporter, { onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxs(Fragment, { children: [
622
- /* @__PURE__ */ jsx(Upload, { className: "w-5 h-5" }),
623
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Import" })
624
- ] }) }),
625
- onSave && /* @__PURE__ */ jsxs(
626
- "button",
627
- {
628
- onClick: onSave,
629
- className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
630
- "aria-label": "Save Script",
631
- children: [
632
- /* @__PURE__ */ jsx(Save, { className: "w-5 h-5" }),
633
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save" })
634
- ]
635
- }
636
- ),
637
- onSaveAsPdf && /* @__PURE__ */ jsxs(
638
- "button",
639
- {
640
- onClick: onSaveAsPdf,
641
- className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
642
- "aria-label": "Save Script as PDF",
643
- children: [
644
- /* @__PURE__ */ jsx(FileDown, { className: "w-5 h-5" }),
645
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save as PDF" })
646
- ]
647
- }
648
- ),
649
- onSaveAsSbx && /* @__PURE__ */ jsxs(
650
- "button",
651
- {
652
- onClick: onSaveAsSbx,
653
- className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
654
- "aria-label": "Save Script as SBX",
655
- children: [
656
- /* @__PURE__ */ jsx(RefreshCcw, { className: "w-5 h-5" }),
657
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Save" })
658
- ]
659
- }
660
- ),
661
- isRulesOpen && /* @__PURE__ */ jsxs("div", { className: "bg-white/80 backdrop-blur-md rounded-xl shadow-lg border border-zinc-200/50 p-4 text-xs text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-64 origin-bottom-right animate-in fade-in zoom-in-95", children: [
662
- /* @__PURE__ */ jsx("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
663
- /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5", children: [
664
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
665
- /* @__PURE__ */ jsx("span", { children: "New Block" }),
666
- /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Enter" })
667
- ] }),
668
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
669
- /* @__PURE__ */ jsx("span", { children: "Delete Block" }),
670
- /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Backspace" })
671
- ] }),
672
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
673
- /* @__PURE__ */ jsx("span", { children: "Change Type" }),
674
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
675
- /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Ctrl" }),
676
- /* @__PURE__ */ jsx("span", { children: "+" }),
677
- /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "\u2191/\u2193" })
678
- ] })
679
- ] })
680
- ] }) }) })
681
- ] }),
682
- /* @__PURE__ */ jsx(
683
- "button",
684
- {
685
- onClick: () => setIsRulesOpen(!isRulesOpen),
686
- className: `flex items-center justify-center w-12 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300 ${isRulesOpen ? "rotate-90" : "rotate-0"}`,
687
- "aria-label": "Toggle Settings",
688
- children: /* @__PURE__ */ jsx(Cog, { className: "w-5 h-5" })
689
- }
690
- )
691
- ] })
695
+ ) })
692
696
  ] });
693
697
  }
694
698
 
@@ -1351,6 +1355,33 @@ function useScreenplayEditor(options) {
1351
1355
  return block;
1352
1356
  });
1353
1357
  setBlocks(finalizedBlocks);
1358
+ if (options == null ? void 0 : options.onSave) {
1359
+ options.onSave(content);
1360
+ const typeToDivClass = {
1361
+ SCENE_HEADING: "divtype0",
1362
+ ACTION: "divtype2",
1363
+ CHARACTER: "divtype3",
1364
+ PARENTHETICAL: "divtype4",
1365
+ DIALOGUE: "divtype5",
1366
+ TRANSITION: "divtype6",
1367
+ GENERAL: "divtype2"
1368
+ };
1369
+ const sbxData = finalizedBlocks.map((block) => {
1370
+ const divClass = typeToDivClass[block.type] || "divtype2";
1371
+ let text = block.text || "";
1372
+ let extraAttributes = "";
1373
+ if (block.type === "SCENE_HEADING") {
1374
+ text = `${block.sceneType || "INT."} ${text} - ${block.timeOfDay || "DAY"}`.toUpperCase();
1375
+ if (block.sceneNumber) {
1376
+ extraAttributes = ` data-scene="${block.sceneNumber}"`;
1377
+ }
1378
+ } else if (block.type === "CHARACTER" || block.type === "TRANSITION") {
1379
+ text = text.toUpperCase();
1380
+ }
1381
+ return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
1382
+ }).join("");
1383
+ options.onSave(sbxData);
1384
+ }
1354
1385
  setTimeout(() => {
1355
1386
  var _a;
1356
1387
  const firstId = parsedBlocks[0].id;
@@ -1361,7 +1392,7 @@ function useScreenplayEditor(options) {
1361
1392
  }, 100);
1362
1393
  }
1363
1394
  },
1364
- [refs]
1395
+ [refs, options == null ? void 0 : options.onSave]
1365
1396
  );
1366
1397
  const handleFocus = useCallback(
1367
1398
  (id) => {
@@ -1504,7 +1535,7 @@ function useScreenplayEditor(options) {
1504
1535
  loadFromUrl
1505
1536
  };
1506
1537
  }
1507
- var handleSaveAsPdf = (blocks, sceneNumbers) => {
1538
+ var handleSaveAsPdf = (blocks, sceneNumbers, project_name) => {
1508
1539
  if (document.activeElement instanceof HTMLElement) {
1509
1540
  document.activeElement.blur();
1510
1541
  }
@@ -1589,9 +1620,13 @@ var handleSaveAsPdf = (blocks, sceneNumbers) => {
1589
1620
  }
1590
1621
  y += blockHeight;
1591
1622
  });
1592
- doc.save("screenplay_export.pdf");
1623
+ if (project_name) {
1624
+ doc.save(`${project_name}_${(/* @__PURE__ */ new Date()).toISOString()}.pdf`);
1625
+ } else {
1626
+ doc.save("screenplay_export.pdf");
1627
+ }
1593
1628
  };
1594
- var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
1629
+ var convertBlocksToSbx = (blocks, sceneNumbers) => {
1595
1630
  const typeToDivClass = {
1596
1631
  SCENE_HEADING: "divtype0",
1597
1632
  ACTION: "divtype2",
@@ -1601,7 +1636,7 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
1601
1636
  TRANSITION: "divtype6",
1602
1637
  GENERAL: "divtype2"
1603
1638
  };
1604
- const sbxData = blocks.map((block) => {
1639
+ return blocks.map((block) => {
1605
1640
  const divClass = typeToDivClass[block.type] || "divtype2";
1606
1641
  let text = block.text || "";
1607
1642
  let extraAttributes = "";
@@ -1616,21 +1651,706 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
1616
1651
  }
1617
1652
  return `<div class="${divClass}" id="par${block.id}"${extraAttributes}>${text}</div>`;
1618
1653
  }).join("");
1654
+ };
1655
+ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx, project_name) => {
1656
+ const sbxData = convertBlocksToSbx(blocks, sceneNumbers);
1619
1657
  const blob = new Blob([sbxData], { type: "text/plain" });
1620
- const url = URL.createObjectURL(blob);
1621
- const a = document.createElement("a");
1622
- a.href = url;
1623
- a.download = "screenplay.sbx";
1624
- document.body.appendChild(a);
1625
- a.click();
1626
- document.body.removeChild(a);
1627
- URL.revokeObjectURL(url);
1628
1658
  if (onSaveAsSbx) {
1629
- const file = new File([blob], "screenplay.sbx", { type: "text/plain" });
1630
- onSaveAsSbx(file);
1659
+ if (project_name) {
1660
+ const file = new File(
1661
+ [blob],
1662
+ `${project_name}_${(/* @__PURE__ */ new Date()).toISOString()}.sbx`,
1663
+ { type: "text/plain" }
1664
+ );
1665
+ onSaveAsSbx(file);
1666
+ } else {
1667
+ const file = new File([blob], "screenplay.sbx", { type: "text/plain" });
1668
+ onSaveAsSbx(file);
1669
+ }
1670
+ }
1671
+ };
1672
+ var handleSyncWithCloud = (blocks, sceneNumbers, onSyncWithCloud) => {
1673
+ if (onSyncWithCloud) {
1674
+ const sbxData = convertBlocksToSbx(blocks, sceneNumbers);
1675
+ onSyncWithCloud(sbxData);
1631
1676
  }
1632
1677
  };
1633
1678
 
1634
- export { ScreenplayEditorView, blockStyles, blockTypes, handleSaveAsPdf, handleSaveAsSbx, icons, timeOfDayOptions, useScreenplayEditor, uuid };
1679
+ // app/types/script-breakdown.types.tsx
1680
+ var CATEGORIES = [
1681
+ { id: "CAST", label: "Cast", color: "#7c3aed", hex: "#8b5cf6" },
1682
+ { id: "PROP", label: "Prop", color: "#ea580c", hex: "#f97316" },
1683
+ { id: "COSTUME", label: "Costume", color: "#db2777", hex: "#ec4899" },
1684
+ { id: "VEHICLE", label: "Vehicle", color: "#2563eb", hex: "#3b82f6" },
1685
+ { id: "SET_PROP", label: "Set Prop", color: "#16a34a", hex: "#22c55e" },
1686
+ { id: "EXTRA", label: "Extra", color: "#0d9488", hex: "#14b8a6" },
1687
+ { id: "LOCATION", label: "Location", color: "#ca8a04", hex: "#eab308" }
1688
+ ];
1689
+ function ScriptBreakdownSceneView({
1690
+ blocks,
1691
+ characters,
1692
+ isLoading,
1693
+ sceneNumber,
1694
+ tags,
1695
+ selectionMenu,
1696
+ handleMouseUp,
1697
+ addTag,
1698
+ removeTag,
1699
+ clearSelection,
1700
+ menuPlacement,
1701
+ menuRef,
1702
+ subLocations,
1703
+ addSubLocation,
1704
+ removeSubLocation,
1705
+ sceneBrief,
1706
+ setSceneBrief
1707
+ }) {
1708
+ const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
1709
+ const [isSubLocOpen, setIsSubLocOpen] = useState(false);
1710
+ const [subLocInput, setSubLocInput] = useState("");
1711
+ const subLocPopoverRef = useRef(null);
1712
+ useEffect(() => {
1713
+ const handleClickOutside = (e) => {
1714
+ if (isSubLocOpen && subLocPopoverRef.current && !subLocPopoverRef.current.contains(e.target)) {
1715
+ setIsSubLocOpen(false);
1716
+ }
1717
+ };
1718
+ document.addEventListener("mousedown", handleClickOutside);
1719
+ return () => document.removeEventListener("mousedown", handleClickOutside);
1720
+ }, [isSubLocOpen]);
1721
+ useEffect(() => {
1722
+ const fontId = "google-font-courier-prime";
1723
+ const styleId = "screenplay-editor-force-v4";
1724
+ if (!document.getElementById(fontId)) {
1725
+ const link = document.createElement("link");
1726
+ link.id = fontId;
1727
+ link.rel = "stylesheet";
1728
+ link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
1729
+ document.head.appendChild(link);
1730
+ }
1731
+ if (!document.getElementById(styleId)) {
1732
+ const style = document.createElement("style");
1733
+ style.id = styleId;
1734
+ style.textContent = `
1735
+ /* We target by the data-attribute to ensure the highest specificity possible */
1736
+ [data-screenplay-editor] *,
1737
+ [data-screenplay-editor] div,
1738
+ [data-screenplay-editor] span,
1739
+ [data-screenplay-editor] [contenteditable="true"] {
1740
+ font-family: ${COURIER_STACK} !important;
1741
+ -webkit-font-smoothing: antialiased;
1742
+ }
1743
+ `;
1744
+ document.head.appendChild(style);
1745
+ }
1746
+ }, [COURIER_STACK]);
1747
+ if (isLoading) {
1748
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
1749
+ /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
1750
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
1751
+ ] });
1752
+ }
1753
+ const hasLocationTag = tags.some((t) => t.categoryId === "LOCATION");
1754
+ const renderBlockText = (block) => {
1755
+ const blockTags = tags.filter((t) => t.blockId === block.id).sort((a, b) => a.startIndex - b.startIndex);
1756
+ if (blockTags.length === 0) return block.text;
1757
+ const nodes = [];
1758
+ let currentIndex = 0;
1759
+ blockTags.forEach((tag) => {
1760
+ if (tag.startIndex > currentIndex) {
1761
+ nodes.push(
1762
+ /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex, tag.startIndex) }, `text-${currentIndex}`)
1763
+ );
1764
+ }
1765
+ const category = CATEGORIES.find((c) => c.id === tag.categoryId);
1766
+ nodes.push(
1767
+ /* @__PURE__ */ jsx(
1768
+ "span",
1769
+ {
1770
+ title: `${category == null ? void 0 : category.label} (Click to edit)`,
1771
+ onClick: (e) => {
1772
+ e.stopPropagation();
1773
+ const selection = window.getSelection();
1774
+ if (!selection) return;
1775
+ const range = document.createRange();
1776
+ const textNode = e.currentTarget.firstChild;
1777
+ if (textNode && textNode.nodeType === Node.TEXT_NODE) {
1778
+ range.selectNodeContents(textNode);
1779
+ } else {
1780
+ range.selectNodeContents(e.currentTarget);
1781
+ }
1782
+ selection.removeAllRanges();
1783
+ selection.addRange(range);
1784
+ setTimeout(() => handleMouseUp(), 0);
1785
+ },
1786
+ className: "cursor-pointer font-bold transition-opacity hover:opacity-70",
1787
+ style: { color: category == null ? void 0 : category.color },
1788
+ children: block.text.slice(tag.startIndex, tag.endIndex)
1789
+ },
1790
+ tag.id
1791
+ )
1792
+ );
1793
+ currentIndex = tag.endIndex;
1794
+ });
1795
+ if (currentIndex < block.text.length) {
1796
+ nodes.push(
1797
+ /* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
1798
+ );
1799
+ }
1800
+ return nodes;
1801
+ };
1802
+ return /* @__PURE__ */ jsx("div", { className: "p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-8 items-start", children: [
1803
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
1804
+ /* @__PURE__ */ jsx(
1805
+ "div",
1806
+ {
1807
+ 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-auto shrink-0",
1808
+ style: {
1809
+ fontFamily: COURIER_STACK,
1810
+ paddingLeft: "1.5in",
1811
+ paddingRight: "1in",
1812
+ paddingTop: "1in",
1813
+ paddingBottom: "1in",
1814
+ lineHeight: "1.2"
1815
+ },
1816
+ "data-screenplay-editor": "true",
1817
+ onMouseUp: handleMouseUp,
1818
+ children: blocks.map((block) => /* @__PURE__ */ jsxs(
1819
+ "div",
1820
+ {
1821
+ "data-block-id": block.id,
1822
+ className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
1823
+ style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
1824
+ minHeight: "2.5rem"
1825
+ }),
1826
+ children: [
1827
+ renderBlockText(block),
1828
+ (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
1829
+ "div",
1830
+ {
1831
+ ref: menuRef,
1832
+ "data-screenplay-editor": "false",
1833
+ className: `tag-menu absolute z-50 bg-white/70 backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-2 flex flex-col w-56 animate-in fade-in zoom-in-95 duration-300 ease-out ${menuPlacement === "top" ? "origin-bottom" : "origin-top"}`,
1834
+ style: {
1835
+ top: selectionMenu.top,
1836
+ left: selectionMenu.left,
1837
+ transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
1838
+ },
1839
+ children: [
1840
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
1841
+ /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
1842
+ /* @__PURE__ */ jsxs(
1843
+ "p",
1844
+ {
1845
+ className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
1846
+ title: selectionMenu.text,
1847
+ children: [
1848
+ '"',
1849
+ selectionMenu.text,
1850
+ '"'
1851
+ ]
1852
+ }
1853
+ )
1854
+ ] }),
1855
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
1856
+ CATEGORIES.filter(
1857
+ (cat) => !(cat.id === "LOCATION" && hasLocationTag)
1858
+ ).map((cat) => /* @__PURE__ */ jsxs(
1859
+ "button",
1860
+ {
1861
+ onClick: () => addTag(cat.id),
1862
+ className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-white/80 hover:shadow-[0_2px_10px_rgb(0,0,0,0.02)] active:scale-[0.98]",
1863
+ style: { color: cat.color },
1864
+ children: [
1865
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1866
+ /* @__PURE__ */ jsx(
1867
+ "div",
1868
+ {
1869
+ className: "w-2 h-2 rounded-full shadow-sm group-hover:scale-125 transition-transform duration-300",
1870
+ style: { backgroundColor: cat.hex }
1871
+ }
1872
+ ),
1873
+ cat.label
1874
+ ] }),
1875
+ /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-slate-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Select" })
1876
+ ]
1877
+ },
1878
+ cat.id
1879
+ )),
1880
+ tags.some(
1881
+ (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
1882
+ ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
1883
+ "button",
1884
+ {
1885
+ onClick: (e) => {
1886
+ const tagToRemove = tags.find(
1887
+ (t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
1888
+ );
1889
+ if (tagToRemove) {
1890
+ removeTag(e, tagToRemove.id);
1891
+ clearSelection();
1892
+ }
1893
+ },
1894
+ className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-rose-50 hover:text-rose-600 hover:shadow-[0_2px_10px_rgb(225,29,72,0.04)] active:scale-[0.98] text-slate-500 border border-transparent hover:border-rose-100",
1895
+ children: [
1896
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1897
+ /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
1898
+ "Remove Tag"
1899
+ ] }),
1900
+ /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-rose-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Remove" })
1901
+ ]
1902
+ }
1903
+ ) })
1904
+ ] })
1905
+ ]
1906
+ }
1907
+ )
1908
+ ]
1909
+ },
1910
+ block.id
1911
+ ))
1912
+ }
1913
+ ),
1914
+ /* @__PURE__ */ jsxs("div", { className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md flex flex-col w-[210mm] shrink-0 p-8 md:p-12 lg:p-16", children: [
1915
+ /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-6 flex items-center gap-3 font-sans", children: [
1916
+ /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-slate-100/80 shadow-inner border border-slate-200/50", children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-3.5 h-3.5 text-slate-500" }) }),
1917
+ "Scene Brief"
1918
+ ] }),
1919
+ /* @__PURE__ */ jsx("div", { className: "relative bg-zinc-50/50 border border-zinc-200/60 rounded-xl p-4 md:p-6 shadow-inner focus-within:bg-white focus-within:border-zinc-300 focus-within:shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300", children: /* @__PURE__ */ jsx(
1920
+ "textarea",
1921
+ {
1922
+ value: sceneBrief,
1923
+ onChange: (e) => setSceneBrief(e.target.value),
1924
+ placeholder: "Write a brief description or notes for this scene...",
1925
+ className: "w-full min-h-[120px] bg-transparent outline-none resize-y text-zinc-700 placeholder:text-zinc-400 text-sm md:text-base custom-scrollbar font-sans",
1926
+ style: {
1927
+ lineHeight: "1.6"
1928
+ }
1929
+ }
1930
+ ) })
1931
+ ] })
1932
+ ] }),
1933
+ /* @__PURE__ */ jsx("div", { className: "w-full lg:w-80 flex-shrink-0 flex flex-col gap-6 sticky top-6", children: /* @__PURE__ */ jsxs("div", { className: "bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8", children: [
1934
+ /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
1935
+ /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white/80 shadow-[0_4px_15px_rgb(0,0,0,0.04)] border border-white", children: /* @__PURE__ */ jsx(Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
1936
+ "Tags",
1937
+ /* @__PURE__ */ jsx("span", { className: "ml-auto bg-slate-100/80 text-slate-500 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-widest border border-slate-200/50 shadow-inner", children: tags.length })
1938
+ ] }),
1939
+ tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
1940
+ const catTags = Array.from(
1941
+ new Map(
1942
+ tags.filter((t) => t.categoryId === cat.id).map((tag) => [tag.text.toLowerCase(), tag])
1943
+ ).values()
1944
+ );
1945
+ if (catTags.length === 0) return null;
1946
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
1947
+ /* @__PURE__ */ jsxs("h4", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 border-b border-white/60 pb-2", children: [
1948
+ /* @__PURE__ */ jsx(
1949
+ "div",
1950
+ {
1951
+ className: "w-2 h-2 rounded-full shadow-sm",
1952
+ style: { backgroundColor: cat.hex }
1953
+ }
1954
+ ),
1955
+ cat.label,
1956
+ cat.id === "LOCATION" && /* @__PURE__ */ jsxs(
1957
+ "div",
1958
+ {
1959
+ className: "ml-auto relative",
1960
+ ref: subLocPopoverRef,
1961
+ children: [
1962
+ /* @__PURE__ */ jsx(
1963
+ "button",
1964
+ {
1965
+ onClick: () => setIsSubLocOpen(!isSubLocOpen),
1966
+ className: "flex items-center justify-center w-5 h-5 rounded-full hover:bg-slate-200 transition-colors",
1967
+ title: "Add Sub Location",
1968
+ children: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 text-slate-500" })
1969
+ }
1970
+ ),
1971
+ isSubLocOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full mt-2 w-56 bg-white backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-3 z-50 animate-in fade-in zoom-in-95", children: [
1972
+ /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-2 px-1", children: "Add Sub Location" }),
1973
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
1974
+ /* @__PURE__ */ jsx(
1975
+ "input",
1976
+ {
1977
+ type: "text",
1978
+ value: subLocInput,
1979
+ onChange: (e) => setSubLocInput(e.target.value),
1980
+ onKeyDown: (e) => {
1981
+ if (e.key === "Enter") {
1982
+ addSubLocation(subLocInput);
1983
+ setSubLocInput("");
1984
+ setIsSubLocOpen(false);
1985
+ }
1986
+ },
1987
+ className: "w-full text-xs px-3 py-2 bg-white/50 border border-white/60 rounded-xl outline-none focus:bg-white/80 focus:border-white transition-all text-slate-700 font-bold shadow-[0_2px_10px_rgb(0,0,0,0.02)] placeholder:font-medium placeholder:text-slate-400",
1988
+ placeholder: "Sub location...",
1989
+ autoFocus: true
1990
+ }
1991
+ ),
1992
+ /* @__PURE__ */ jsx(
1993
+ "button",
1994
+ {
1995
+ onClick: () => {
1996
+ addSubLocation(subLocInput);
1997
+ setSubLocInput("");
1998
+ setIsSubLocOpen(false);
1999
+ },
2000
+ className: "flex items-center justify-center shrink-0 bg-slate-800 text-white px-3.5 py-2 rounded-xl text-[11px] font-bold hover:bg-slate-700 hover:shadow-md transition-all active:scale-95",
2001
+ children: "Add"
2002
+ }
2003
+ )
2004
+ ] })
2005
+ ] })
2006
+ ]
2007
+ }
2008
+ )
2009
+ ] }),
2010
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
2011
+ catTags.map((tag) => /* @__PURE__ */ jsx(
2012
+ "span",
2013
+ {
2014
+ className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
2015
+ style: { color: cat.color },
2016
+ children: tag.text
2017
+ },
2018
+ tag.id
2019
+ )),
2020
+ cat.id === "LOCATION" && subLocations.map((subLoc) => /* @__PURE__ */ jsxs(
2021
+ "span",
2022
+ {
2023
+ className: "group flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white backdrop-blur-md border border-slate-200/50 shadow-[0_4px_15px_rgb(0,0,0,0.03)] transition-all duration-300 cursor-default text-slate-500",
2024
+ children: [
2025
+ subLoc,
2026
+ /* @__PURE__ */ jsx(
2027
+ "button",
2028
+ {
2029
+ onClick: () => removeSubLocation(subLoc),
2030
+ className: "w-3.5 h-3.5 rounded-full hover:bg-slate-300/50 flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100",
2031
+ children: /* @__PURE__ */ jsx(X, { className: "w-2.5 h-2.5" })
2032
+ }
2033
+ )
2034
+ ]
2035
+ },
2036
+ `sub-${subLoc}`
2037
+ ))
2038
+ ] })
2039
+ ] }, cat.id);
2040
+ }) }) : /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-slate-400 italic bg-white/40 p-6 rounded-[2rem] border border-white border-dashed text-center shadow-[0_4px_20px_rgb(0,0,0,0.02)]", children: "Highlight text to tag elements." })
2041
+ ] }) })
2042
+ ] }) });
2043
+ }
2044
+ function useScriptBreakdown({
2045
+ scenes
2046
+ }) {
2047
+ const [parsedScenes, setParsedScenes] = useState(scenes || []);
2048
+ const [isLoading, setIsLoading] = useState(false);
2049
+ const [error, setError] = useState(null);
2050
+ const [hasFetchedFallback, setHasFetchedFallback] = useState(false);
2051
+ useEffect(() => {
2052
+ if (scenes && scenes.length > 0) {
2053
+ setParsedScenes(scenes);
2054
+ return;
2055
+ }
2056
+ if (hasFetchedFallback) return;
2057
+ const fetchFallback = async () => {
2058
+ setIsLoading(true);
2059
+ setHasFetchedFallback(true);
2060
+ try {
2061
+ const response = await fetch(
2062
+ "https://pub-4c2073ce6f434c4e92ed33f8e1c7f9ea.r2.dev/screenplay%20(1).sbx"
2063
+ );
2064
+ if (!response.ok) {
2065
+ throw new Error(
2066
+ `Failed to fetch fallback script: ${response.status}`
2067
+ );
2068
+ }
2069
+ let text = await response.text();
2070
+ if (text.includes("&lt;div")) {
2071
+ const textarea = document.createElement("textarea");
2072
+ textarea.innerHTML = text;
2073
+ text = textarea.value;
2074
+ }
2075
+ const parser = new DOMParser();
2076
+ const doc = parser.parseFromString(text, "text/html");
2077
+ const divs = Array.from(doc.querySelectorAll("div"));
2078
+ const extractedScenes = [];
2079
+ let currentSceneNumber = "1";
2080
+ let currentContent = "";
2081
+ let hasSeenFirstSceneHeading = false;
2082
+ divs.forEach((div) => {
2083
+ var _a;
2084
+ const isSceneHeading = div.classList.contains("divtype0");
2085
+ const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
2086
+ if (!divText) return;
2087
+ if (isSceneHeading) {
2088
+ if (hasSeenFirstSceneHeading) {
2089
+ extractedScenes.push({
2090
+ scene_number: currentSceneNumber,
2091
+ content: currentContent.trim()
2092
+ });
2093
+ currentContent = "";
2094
+ }
2095
+ hasSeenFirstSceneHeading = true;
2096
+ currentSceneNumber = div.getAttribute("data-scene") || String(extractedScenes.length + 1);
2097
+ }
2098
+ currentContent += div.outerHTML + "\n";
2099
+ });
2100
+ if (currentContent.trim()) {
2101
+ extractedScenes.push({
2102
+ scene_number: currentSceneNumber,
2103
+ content: currentContent.trim()
2104
+ });
2105
+ }
2106
+ setParsedScenes(extractedScenes);
2107
+ } catch (err) {
2108
+ console.error("Error fetching fallback script:", err);
2109
+ setError(err instanceof Error ? err : new Error("Unknown error"));
2110
+ } finally {
2111
+ setIsLoading(false);
2112
+ }
2113
+ };
2114
+ fetchFallback();
2115
+ }, [scenes, hasFetchedFallback]);
2116
+ return { scenes: parsedScenes, isLoading, error };
2117
+ }
2118
+ var use_script_breakdown_default = useScriptBreakdown;
2119
+
2120
+ // app/hook/use-script-breakdown-scene.ts
2121
+ function useScriptBreakdownScene(sceneNumber) {
2122
+ const { scenes, isLoading, error } = use_script_breakdown_default({ scenes: [] });
2123
+ const scene = useMemo(() => {
2124
+ return scenes.find((s) => s.scene_number === sceneNumber);
2125
+ }, [scenes, sceneNumber]);
2126
+ const blocks = useMemo(() => {
2127
+ if (!scene || !scene.content) return [];
2128
+ const parser = new DOMParser();
2129
+ const doc = parser.parseFromString(scene.content, "text/html");
2130
+ const divs = Array.from(doc.querySelectorAll("div"));
2131
+ const parsedBlocks = [];
2132
+ const typeMap = {
2133
+ divtype0: "SCENE_HEADING",
2134
+ divtype2: "ACTION",
2135
+ divtype3: "CHARACTER",
2136
+ divtype4: "PARENTHETICAL",
2137
+ divtype5: "DIALOGUE",
2138
+ divtype6: "TRANSITION"
2139
+ };
2140
+ divs.forEach((div) => {
2141
+ var _a;
2142
+ const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
2143
+ if (!divText) return;
2144
+ let type = "ACTION";
2145
+ for (const className of Array.from(div.classList)) {
2146
+ if (typeMap[className]) {
2147
+ type = typeMap[className];
2148
+ break;
2149
+ }
2150
+ }
2151
+ parsedBlocks.push({ id: uuid(), type, text: divText });
2152
+ });
2153
+ return parsedBlocks;
2154
+ }, [scene]);
2155
+ const characters = useMemo(() => {
2156
+ const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
2157
+ const text = b.text.trim().toUpperCase();
2158
+ const parenIndex = text.indexOf("(");
2159
+ return parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
2160
+ }).filter(Boolean);
2161
+ return [...new Set(chars)];
2162
+ }, [blocks]);
2163
+ const [tags, setTags] = useState([]);
2164
+ const [selectionMenu, setSelectionMenu] = useState(null);
2165
+ const autoTaggedSceneRef = useRef(null);
2166
+ const [menuPlacement, setMenuPlacement] = useState("top");
2167
+ const menuRef = useRef(null);
2168
+ const [subLocations, setSubLocations] = useState([]);
2169
+ const addSubLocation = useCallback(
2170
+ (subLocation) => {
2171
+ const trimmed = subLocation.trim();
2172
+ if (trimmed && !subLocations.includes(trimmed)) {
2173
+ setSubLocations((prev) => [...prev, trimmed]);
2174
+ }
2175
+ },
2176
+ [subLocations]
2177
+ );
2178
+ const removeSubLocation = useCallback((subLocation) => {
2179
+ setSubLocations((prev) => prev.filter((loc) => loc !== subLocation));
2180
+ }, []);
2181
+ const [sceneBrief, setSceneBrief] = useState("");
2182
+ useEffect(() => {
2183
+ setTags([]);
2184
+ setSubLocations([]);
2185
+ setSceneBrief("");
2186
+ autoTaggedSceneRef.current = null;
2187
+ }, [sceneNumber]);
2188
+ useEffect(() => {
2189
+ if (blocks.length > 0 && characters.length > 0 && autoTaggedSceneRef.current !== sceneNumber) {
2190
+ const autoTags = [];
2191
+ const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
2192
+ const sortedChars = [...characters].sort((a, b) => b.length - a.length);
2193
+ blocks.forEach((block) => {
2194
+ sortedChars.forEach((char) => {
2195
+ const escapedChar = escapeRegExp(char);
2196
+ const regex = new RegExp(`\\b${escapedChar}\\b`, "gi");
2197
+ let match;
2198
+ while ((match = regex.exec(block.text)) !== null) {
2199
+ const isOverlapping = autoTags.some(
2200
+ (t) => t.blockId === block.id && match.index + char.length > t.startIndex && match.index < t.endIndex
2201
+ );
2202
+ if (!isOverlapping) {
2203
+ autoTags.push({
2204
+ id: uuid(),
2205
+ blockId: block.id,
2206
+ categoryId: "CAST",
2207
+ text: block.text.substring(
2208
+ match.index,
2209
+ match.index + char.length
2210
+ ),
2211
+ startIndex: match.index,
2212
+ endIndex: match.index + char.length
2213
+ });
2214
+ }
2215
+ }
2216
+ });
2217
+ });
2218
+ setTags(autoTags);
2219
+ autoTaggedSceneRef.current = sceneNumber;
2220
+ }
2221
+ }, [blocks, characters, sceneNumber]);
2222
+ const clearSelection = useCallback(() => {
2223
+ var _a;
2224
+ setSelectionMenu(null);
2225
+ (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
2226
+ }, []);
2227
+ useEffect(() => {
2228
+ if (!selectionMenu) {
2229
+ setMenuPlacement("top");
2230
+ }
2231
+ }, [selectionMenu]);
2232
+ useEffect(() => {
2233
+ if (selectionMenu && menuRef.current) {
2234
+ const rect = menuRef.current.getBoundingClientRect();
2235
+ if (menuPlacement === "top" && rect.top < 100) {
2236
+ setMenuPlacement("bottom");
2237
+ } else if (menuPlacement === "bottom" && rect.bottom > window.innerHeight - 40 && rect.top > 300) {
2238
+ setMenuPlacement("top");
2239
+ }
2240
+ }
2241
+ }, [selectionMenu, menuPlacement]);
2242
+ useEffect(() => {
2243
+ const handleClickOutside = (e) => {
2244
+ if (selectionMenu && !e.target.closest(".tag-menu")) {
2245
+ clearSelection();
2246
+ }
2247
+ };
2248
+ document.addEventListener("mousedown", handleClickOutside);
2249
+ return () => document.removeEventListener("mousedown", handleClickOutside);
2250
+ }, [selectionMenu, clearSelection]);
2251
+ const getAbsoluteOffset = (container, targetNode, targetOffset) => {
2252
+ let absoluteOffset = 0;
2253
+ let found = false;
2254
+ const traverse = (node) => {
2255
+ var _a;
2256
+ if (found) return;
2257
+ if (node === targetNode) {
2258
+ absoluteOffset += targetOffset;
2259
+ found = true;
2260
+ return;
2261
+ }
2262
+ if (node.nodeType === Node.TEXT_NODE) {
2263
+ absoluteOffset += ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
2264
+ } else {
2265
+ for (let i = 0; i < node.childNodes.length; i++) {
2266
+ traverse(node.childNodes[i]);
2267
+ if (found) return;
2268
+ }
2269
+ }
2270
+ };
2271
+ traverse(container);
2272
+ return found ? absoluteOffset : null;
2273
+ };
2274
+ const handleMouseUp = () => {
2275
+ const selection = window.getSelection();
2276
+ if (!selection || selection.isCollapsed || !selection.toString().trim())
2277
+ return;
2278
+ const range = selection.getRangeAt(0);
2279
+ let container = range.commonAncestorContainer;
2280
+ if (container.nodeType === Node.TEXT_NODE)
2281
+ container = container.parentElement;
2282
+ const blockElem = container.closest("[data-block-id]");
2283
+ if (!blockElem) return;
2284
+ const blockId = blockElem.getAttribute("data-block-id");
2285
+ const startOffset = getAbsoluteOffset(
2286
+ blockElem,
2287
+ range.startContainer,
2288
+ range.startOffset
2289
+ );
2290
+ const endOffset = getAbsoluteOffset(
2291
+ blockElem,
2292
+ range.endContainer,
2293
+ range.endOffset
2294
+ );
2295
+ if (startOffset !== null && endOffset !== null) {
2296
+ const rect = range.getBoundingClientRect();
2297
+ const blockRect = blockElem.getBoundingClientRect();
2298
+ setSelectionMenu({
2299
+ blockId,
2300
+ startIndex: Math.min(startOffset, endOffset),
2301
+ endIndex: Math.max(startOffset, endOffset),
2302
+ text: selection.toString().trim(),
2303
+ top: rect.top - blockRect.top,
2304
+ left: rect.left - blockRect.left + rect.width / 2
2305
+ });
2306
+ }
2307
+ };
2308
+ const addTag = (categoryId) => {
2309
+ if (!selectionMenu) return;
2310
+ const newTag = {
2311
+ id: uuid(),
2312
+ blockId: selectionMenu.blockId,
2313
+ categoryId,
2314
+ text: selectionMenu.text,
2315
+ startIndex: selectionMenu.startIndex,
2316
+ endIndex: selectionMenu.endIndex
2317
+ };
2318
+ setTags((prev) => {
2319
+ const filtered = prev.filter(
2320
+ (t) => t.blockId !== newTag.blockId || !(newTag.endIndex > t.startIndex && newTag.startIndex < t.endIndex)
2321
+ );
2322
+ return [...filtered, newTag];
2323
+ });
2324
+ clearSelection();
2325
+ };
2326
+ const removeTag = (e, id) => {
2327
+ e.stopPropagation();
2328
+ e.preventDefault();
2329
+ setTags((prev) => prev.filter((t) => t.id !== id));
2330
+ clearSelection();
2331
+ };
2332
+ return {
2333
+ scene,
2334
+ blocks,
2335
+ characters,
2336
+ isLoading,
2337
+ error,
2338
+ tags,
2339
+ selectionMenu,
2340
+ handleMouseUp,
2341
+ addTag,
2342
+ removeTag,
2343
+ clearSelection,
2344
+ menuPlacement,
2345
+ menuRef,
2346
+ subLocations,
2347
+ addSubLocation,
2348
+ removeSubLocation,
2349
+ sceneBrief,
2350
+ setSceneBrief
2351
+ };
2352
+ }
2353
+
2354
+ export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, blockStyles, blockTypes, convertBlocksToSbx, handleSaveAsPdf, handleSaveAsSbx, handleSyncWithCloud, icons, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, uuid };
1635
2355
  //# sourceMappingURL=index.js.map
1636
2356
  //# sourceMappingURL=index.js.map