@vishu1301/script-writing 1.3.3 → 1.3.5

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 +598 -400
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +8 -4
  4. package/dist/index.d.ts +8 -4
  5. package/dist/index.js +599 -401
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
2
- import { Users, Box, Shirt, Car, Armchair, UserPlus, MapPin, Map as Map$1, ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, Upload, Lock, Unlock, Save, FileDown, RefreshCcw, Cog, ArrowRight, User, ChevronRight, Loader2, AlignLeft, Tags, ChevronDown } from 'lucide-react';
2
+ import { Users, Box, Shirt, Car, Armchair, UserPlus, MapPin, Map as Map$1, ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, Upload, Lock, Unlock, Save, FileDown, RefreshCcw, Cog, ArrowRight, User, ChevronRight, Loader2, AlignLeft, Tags, ChevronDown, 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';
@@ -270,9 +270,9 @@ function PdfImporter({ onScriptImported, disabled, children }) {
270
270
  {
271
271
  onClick: handleClick,
272
272
  disabled: isProcessing || disabled,
273
- 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 disabled:cursor-not-allowed disabled:bg-zinc-700 disabled:shadow-none disabled:border-zinc-600/50",
273
+ 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"}`,
274
274
  "aria-label": "Import Script",
275
- children: isProcessing ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Processing..." }) : children
275
+ children: isProcessing ? /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-semibold", children: "Processing..." }) : children
276
276
  }
277
277
  ),
278
278
  error && /* @__PURE__ */ jsxs("p", { className: "sr-only", children: [
@@ -353,150 +353,148 @@ function ScreenplayEditorView({
353
353
  }
354
354
  }, [COURIER_STACK]);
355
355
  return /* @__PURE__ */ jsxs(Fragment, { children: [
356
- /* @__PURE__ */ jsxs(
357
- "div",
358
- {
359
- 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)] rounded-[2rem] flex items-center justify-between p-2 mb-12 select-none transition-all",
360
- style: {
361
- maxWidth: "1240px"
362
- },
363
- children: [
364
- /* @__PURE__ */ jsx("div", { className: "flex gap-1 overflow-x-auto custom-scrollbar pr-2 items-center", children: blockTypes.map((type) => {
365
- var _a;
366
- const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
367
- return /* @__PURE__ */ jsxs(
368
- "button",
369
- {
370
- type: "button",
371
- disabled: isLocked,
372
- 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"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
373
- onClick: () => handleBlockTypeChange(type),
374
- children: [
375
- /* @__PURE__ */ jsx(
376
- "input",
377
- {
378
- type: "radio",
379
- name: "blockType",
380
- id: `block-type-${type}`,
381
- className: "sr-only",
382
- "aria-label": blockStyles[type].label,
383
- checked: selected,
384
- readOnly: true
385
- }
386
- ),
387
- /* @__PURE__ */ jsxs(
388
- "label",
389
- {
390
- htmlFor: `block-type-${type}`,
391
- className: "flex items-center gap-2 cursor-pointer pointer-events-none",
392
- children: [
393
- /* @__PURE__ */ jsx(
394
- "div",
395
- {
396
- className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200`,
397
- children: icons[type]
398
- }
399
- ),
400
- /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline tracking-wide", children: blockStyles[type].label })
401
- ]
402
- }
403
- )
404
- ]
405
- },
406
- type
407
- );
408
- }) }),
409
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
410
- /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
411
- showPdfImport && !isLocked && /* @__PURE__ */ jsx(
412
- PdfImporter,
413
- {
414
- disabled: isLocked,
415
- onScriptImported: handleScriptImport,
416
- children: /* @__PURE__ */ jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsx(Upload, { className: "w-[18px] h-[18px]" }) })
417
- }
418
- ),
419
- onToggleLock && /* @__PURE__ */ jsx(
420
- "button",
421
- {
422
- onClick: onToggleLock,
423
- className: `flex items-center justify-center w-10 h-10 rounded-full transition-all duration-200 active:scale-95 ${isLocked ? "text-rose-500 hover:bg-rose-50" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
424
- title: isLocked ? "Unlock Script" : "Lock Script",
425
- "aria-label": isLocked ? "Unlock Script" : "Lock Script",
426
- children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "w-[18px] h-[18px]" }) : /* @__PURE__ */ jsx(Unlock, { className: "w-[18px] h-[18px]" })
427
- }
428
- ),
429
- onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsx(
430
- "button",
431
- {
432
- onClick: onSave,
433
- 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",
434
- title: "Save Script",
435
- "aria-label": "Save Script",
436
- children: /* @__PURE__ */ jsx(Save, { className: "w-[18px] h-[18px]" })
437
- }
438
- ),
439
- onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsx(
440
- "button",
441
- {
442
- onClick: onSaveAsPdf,
443
- 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",
444
- title: "Save as PDF",
445
- "aria-label": "Save Script as PDF",
446
- children: /* @__PURE__ */ jsx(FileDown, { className: "w-[18px] h-[18px]" })
447
- }
448
- ),
449
- onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsx(
450
- "button",
451
- {
452
- onClick: onSyncWithCloud,
453
- 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",
454
- title: "Sync with Cloud",
455
- "aria-label": "Sync with Cloud",
456
- children: /* @__PURE__ */ jsx(RefreshCcw, { className: "w-[18px] h-[18px]" })
457
- }
458
- ),
459
- /* @__PURE__ */ jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
356
+ /* @__PURE__ */ jsxs("div", { className: "sticky top-2 sm:top-6 z-50 mx-auto w-full max-w-5xl bg-white/80 backdrop-blur-2xl border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.06)] rounded-[1.5rem] sm:rounded-[2rem] flex items-center justify-between p-1.5 sm:p-2 mb-6 sm:mb-12 select-none transition-all", children: [
357
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1 overflow-x-auto custom-scrollbar pr-2 flex-1 [mask-image:linear-gradient(to_right,white_90%,transparent_100%)] sm:[mask-image:none] no-scrollbar", children: blockTypes.map((type) => {
358
+ var _a;
359
+ const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
360
+ return /* @__PURE__ */ jsxs(
361
+ "button",
362
+ {
363
+ type: "button",
364
+ disabled: isLocked,
365
+ className: `group flex shrink-0 items-center gap-2 sm:gap-2.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full font-semibold text-xs sm: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"} ${isLocked ? "opacity-50 cursor-not-allowed" : ""}`,
366
+ onClick: () => handleBlockTypeChange(type),
367
+ children: [
460
368
  /* @__PURE__ */ jsx(
461
- "button",
369
+ "input",
462
370
  {
463
- onClick: () => setIsRulesOpen(!isRulesOpen),
464
- 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"}`,
465
- title: "Settings & Shortcuts",
466
- "aria-label": "Toggle Settings",
467
- children: /* @__PURE__ */ jsx(Cog, { className: "w-[18px] h-[18px]" })
371
+ type: "radio",
372
+ name: "blockType",
373
+ id: `block-type-${type}`,
374
+ className: "sr-only",
375
+ "aria-label": blockStyles[type].label,
376
+ checked: selected,
377
+ readOnly: true
468
378
  }
469
379
  ),
470
- isRulesOpen && /* @__PURE__ */ jsxs("div", { className: "absolute top-full mt-2 right-0 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] 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: [
471
- /* @__PURE__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
472
- /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
473
- "Settings & Shortcuts"
474
- ] }),
475
- /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
476
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
477
- /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
478
- /* @__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" })
479
- ] }),
480
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
481
- /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
482
- /* @__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" })
483
- ] }),
484
- /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
485
- /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
486
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
487
- /* @__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" }),
488
- /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
489
- /* @__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" })
490
- ] })
491
- ] })
492
- ] }) })
380
+ /* @__PURE__ */ jsxs(
381
+ "label",
382
+ {
383
+ htmlFor: `block-type-${type}`,
384
+ className: "flex items-center gap-2 cursor-pointer pointer-events-none",
385
+ children: [
386
+ /* @__PURE__ */ jsx(
387
+ "div",
388
+ {
389
+ className: `${selected ? "opacity-100" : "opacity-70 group-hover:opacity-100"} transition-opacity duration-200 flex items-center justify-center`,
390
+ children: icons[type]
391
+ }
392
+ ),
393
+ /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden lg:inline tracking-wide", children: blockStyles[type].label })
394
+ ]
395
+ }
396
+ )
397
+ ]
398
+ },
399
+ type
400
+ );
401
+ }) }),
402
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 relative px-1 sm:px-2 ml-2 sm:ml-0 border-l border-zinc-200/80 sm:border-none pl-2 sm:pl-1", children: [
403
+ /* @__PURE__ */ jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-1 sm:mx-2 hidden sm:block rounded-full" }),
404
+ showPdfImport && !isLocked && /* @__PURE__ */ jsx(
405
+ PdfImporter,
406
+ {
407
+ disabled: isLocked,
408
+ onScriptImported: handleScriptImport,
409
+ children: /* @__PURE__ */ jsx(
410
+ "div",
411
+ {
412
+ title: "Import Script",
413
+ className: "flex items-center justify-center",
414
+ children: /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
415
+ }
416
+ )
417
+ }
418
+ ),
419
+ onToggleLock && /* @__PURE__ */ jsx(
420
+ "button",
421
+ {
422
+ onClick: onToggleLock,
423
+ className: `flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full transition-all duration-200 active:scale-95 ${isLocked ? "text-rose-500 hover:bg-rose-50" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"}`,
424
+ title: isLocked ? "Unlock Script" : "Lock Script",
425
+ "aria-label": isLocked ? "Unlock Script" : "Lock Script",
426
+ children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" }) : /* @__PURE__ */ jsx(Unlock, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
427
+ }
428
+ ),
429
+ onSave && showSaveButton && !isLocked && /* @__PURE__ */ jsx(
430
+ "button",
431
+ {
432
+ onClick: onSave,
433
+ className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
434
+ title: "Save Script",
435
+ "aria-label": "Save Script",
436
+ children: /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
437
+ }
438
+ ),
439
+ onSaveAsPdf && showSaveButton && /* @__PURE__ */ jsx(
440
+ "button",
441
+ {
442
+ onClick: onSaveAsPdf,
443
+ className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
444
+ title: "Save as PDF",
445
+ "aria-label": "Save Script as PDF",
446
+ children: /* @__PURE__ */ jsx(FileDown, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
447
+ }
448
+ ),
449
+ onSyncWithCloud && showSyncButton && !isLocked && /* @__PURE__ */ jsx(
450
+ "button",
451
+ {
452
+ onClick: onSyncWithCloud,
453
+ className: "flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 transition-all duration-200 active:scale-95",
454
+ title: "Sync with Cloud",
455
+ "aria-label": "Sync with Cloud",
456
+ children: /* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
457
+ }
458
+ ),
459
+ /* @__PURE__ */ jsxs("div", { ref: rulesRef, className: "relative flex items-center", children: [
460
+ /* @__PURE__ */ jsx(
461
+ "button",
462
+ {
463
+ onClick: () => setIsRulesOpen(!isRulesOpen),
464
+ className: `flex items-center justify-center w-8 h-8 sm:w-10 sm: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"}`,
465
+ title: "Settings & Shortcuts",
466
+ "aria-label": "Toggle Settings",
467
+ children: /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 sm:w-[18px] sm:h-[18px]" })
468
+ }
469
+ ),
470
+ isRulesOpen && /* @__PURE__ */ jsxs("div", { className: "absolute top-full mt-2 right-0 sm:-right-2 bg-white/95 backdrop-blur-3xl rounded-[1.5rem] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] p-4 sm:p-5 text-sm text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-[calc(100vw-2rem)] sm:w-72 max-w-[18rem] origin-top-right animate-in fade-in zoom-in-95 z-50", children: [
471
+ /* @__PURE__ */ jsxs("h4", { className: "font-bold text-zinc-900 mb-4 text-sm flex items-center gap-2", children: [
472
+ /* @__PURE__ */ jsx(Cog, { className: "w-4 h-4 text-zinc-400" }),
473
+ "Settings & Shortcuts"
474
+ ] }),
475
+ /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2.5", children: [
476
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
477
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "New Block" }),
478
+ /* @__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" })
479
+ ] }),
480
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
481
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Delete Block" }),
482
+ /* @__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" })
483
+ ] }),
484
+ /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
485
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-600", children: "Change Type" }),
486
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
487
+ /* @__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" }),
488
+ /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-medium", children: "+" }),
489
+ /* @__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" })
490
+ ] })
493
491
  ] })
494
- ] })
492
+ ] }) })
495
493
  ] })
496
- ]
497
- }
498
- ),
499
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
494
+ ] })
495
+ ] })
496
+ ] }),
497
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 pb-24 w-full items-center justify-center", children: /* @__PURE__ */ jsx(
500
498
  "div",
501
499
  {
502
500
  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",
@@ -1812,10 +1810,16 @@ function ScriptBreakdownSceneView({
1812
1810
  setSceneBrief,
1813
1811
  onSummarize,
1814
1812
  isSummarizing,
1815
- aiSummarized = false
1813
+ aiSummarized = false,
1814
+ onUpdateBrief
1816
1815
  }) {
1817
- const [expanded, setExpanded] = useState(false);
1818
1816
  const [expandedCategories, setExpandedCategories] = useState({});
1817
+ const [editingTagData, setEditingTagData] = useState(null);
1818
+ const [tagForm, setTagForm] = useState({ quantity: 1, look: "", age: "" });
1819
+ const [popupPlacement, setPopupPlacement] = useState({
1820
+ alignRight: false,
1821
+ alignBottom: false
1822
+ });
1819
1823
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
1820
1824
  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
1821
1825
  useEffect(() => {
@@ -1906,273 +1910,438 @@ function ScriptBreakdownSceneView({
1906
1910
  }
1907
1911
  return nodes;
1908
1912
  };
1909
- return /* @__PURE__ */ jsx("div", { className: "relative p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8 xl:pr-[20rem]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center max-w-6xl xl:max-w-full", children: [
1910
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 min-h-screen", children: [
1913
+ return /* @__PURE__ */ jsxs("div", { className: "relative p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8 xl:pr-[20rem]", children: [
1914
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center max-w-6xl xl:max-w-full", children: [
1915
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 min-h-screen", children: [
1916
+ /* @__PURE__ */ jsx(
1917
+ "div",
1918
+ {
1919
+ className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-auto shrink-0",
1920
+ style: {
1921
+ fontFamily: COURIER_STACK,
1922
+ paddingLeft: "1.5in",
1923
+ paddingRight: "1in",
1924
+ paddingTop: "1in",
1925
+ paddingBottom: "1in",
1926
+ lineHeight: "1.2"
1927
+ },
1928
+ "data-screenplay-editor": "true",
1929
+ onMouseUp: handleMouseUp,
1930
+ children: blocks.map((block) => /* @__PURE__ */ jsxs(
1931
+ "div",
1932
+ {
1933
+ "data-block-id": block.id,
1934
+ className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
1935
+ style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
1936
+ minHeight: "2.5rem"
1937
+ }),
1938
+ children: [
1939
+ renderBlockText(block),
1940
+ (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
1941
+ "div",
1942
+ {
1943
+ ref: menuRef,
1944
+ "data-screenplay-editor": "false",
1945
+ 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"}`,
1946
+ style: {
1947
+ top: selectionMenu.top,
1948
+ left: selectionMenu.left,
1949
+ transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
1950
+ },
1951
+ children: [
1952
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
1953
+ /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
1954
+ /* @__PURE__ */ jsxs(
1955
+ "p",
1956
+ {
1957
+ className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
1958
+ title: selectionMenu.text,
1959
+ children: [
1960
+ '"',
1961
+ selectionMenu.text,
1962
+ '"'
1963
+ ]
1964
+ }
1965
+ )
1966
+ ] }),
1967
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
1968
+ CATEGORIES.filter(
1969
+ (cat) => !(cat.id === "LOCATION" && hasLocationTag) && !(cat.id === "SUBLOCATION" && !hasLocationTag)
1970
+ ).map((cat) => /* @__PURE__ */ jsxs(
1971
+ "button",
1972
+ {
1973
+ onClick: () => {
1974
+ const existingTag = tags.find(
1975
+ (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
1976
+ );
1977
+ if (existingTag && existingTag.id) {
1978
+ updateTag == null ? void 0 : updateTag(existingTag.id, cat.id);
1979
+ } else {
1980
+ addTag(cat.id);
1981
+ }
1982
+ },
1983
+ 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]",
1984
+ style: { color: cat.color },
1985
+ children: [
1986
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1987
+ /* @__PURE__ */ jsx(
1988
+ cat.icon,
1989
+ {
1990
+ className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
1991
+ style: { color: cat.color }
1992
+ }
1993
+ ),
1994
+ cat.label
1995
+ ] }),
1996
+ /* @__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" })
1997
+ ]
1998
+ },
1999
+ cat.id
2000
+ )),
2001
+ tags.some(
2002
+ (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
2003
+ ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
2004
+ "button",
2005
+ {
2006
+ onClick: (e) => {
2007
+ const tagToRemove = tags.find(
2008
+ (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
2009
+ );
2010
+ if (tagToRemove) {
2011
+ removeTag(e, tagToRemove.id);
2012
+ clearSelection();
2013
+ }
2014
+ },
2015
+ 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",
2016
+ children: [
2017
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2018
+ /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
2019
+ "Remove Tag"
2020
+ ] }),
2021
+ /* @__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" })
2022
+ ]
2023
+ }
2024
+ ) })
2025
+ ] })
2026
+ ]
2027
+ }
2028
+ )
2029
+ ]
2030
+ },
2031
+ block.id
2032
+ ))
2033
+ }
2034
+ ),
2035
+ /* @__PURE__ */ jsxs("div", { className: "relative bg-[#fdfdfc] shadow-md 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: [
2036
+ /* @__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: [
2037
+ /* @__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" }) }),
2038
+ "Scene Brief"
2039
+ ] }),
2040
+ /* @__PURE__ */ jsxs("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: [
2041
+ /* @__PURE__ */ jsx(
2042
+ "textarea",
2043
+ {
2044
+ value: sceneBrief,
2045
+ onChange: (e) => setSceneBrief(e.target.value),
2046
+ placeholder: "Write a brief description or notes for this scene...",
2047
+ 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 select-none",
2048
+ style: {
2049
+ lineHeight: "1.6"
2050
+ }
2051
+ }
2052
+ ),
2053
+ /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(
2054
+ "button",
2055
+ {
2056
+ onClick: onUpdateBrief,
2057
+ disabled: !sceneBrief || sceneBrief.trim() === "",
2058
+ className: "rounded-full bg-[#15607b] px-6 py-3 text-[13px] font-semibold tracking-wide text-white shadow-md transition-all hover:bg-[#134a61] hover:shadow-lg active:scale-95 disabled:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-95 disabled:text-black disabled:shadow-none",
2059
+ children: "Update"
2060
+ }
2061
+ ) })
2062
+ ] })
2063
+ ] })
2064
+ ] }),
2065
+ /* @__PURE__ */ jsxs(
2066
+ "button",
2067
+ {
2068
+ onClick: () => setIsSidebarOpen(true),
2069
+ className: "fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#15607b] text-white shadow-[0_8px_30px_rgba(21,96,123,0.3)] transition-transform hover:scale-105 active:scale-95 xl:hidden",
2070
+ children: [
2071
+ /* @__PURE__ */ jsx(Tags, { className: "h-6 w-6" }),
2072
+ tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] font-bold text-white shadow-sm border-2 border-white", children: tags.length })
2073
+ ]
2074
+ }
2075
+ ),
2076
+ isSidebarOpen && /* @__PURE__ */ jsx(
2077
+ "div",
2078
+ {
2079
+ className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
2080
+ onClick: () => setIsSidebarOpen(false)
2081
+ }
2082
+ ),
1911
2083
  /* @__PURE__ */ jsx(
1912
2084
  "div",
1913
2085
  {
1914
- className: "relative bg-[#fdfdfc] shadow-md shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-auto shrink-0",
1915
- style: {
1916
- fontFamily: COURIER_STACK,
1917
- paddingLeft: "1.5in",
1918
- paddingRight: "1in",
1919
- paddingTop: "1in",
1920
- paddingBottom: "1in",
1921
- lineHeight: "1.2"
1922
- },
1923
- "data-screenplay-editor": "true",
1924
- onMouseUp: handleMouseUp,
1925
- children: blocks.map((block) => /* @__PURE__ */ jsxs(
1926
- "div",
1927
- {
1928
- "data-block-id": block.id,
1929
- className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
1930
- style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
1931
- minHeight: "2.5rem"
1932
- }),
1933
- children: [
1934
- renderBlockText(block),
1935
- (selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
1936
- "div",
1937
- {
1938
- ref: menuRef,
1939
- "data-screenplay-editor": "false",
1940
- 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"}`,
1941
- style: {
1942
- top: selectionMenu.top,
1943
- left: selectionMenu.left,
1944
- transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
1945
- },
1946
- children: [
1947
- /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
1948
- /* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
1949
- /* @__PURE__ */ jsxs(
1950
- "p",
2086
+ className: `fixed xl:absolute top-0 right-0 z-50 h-full w-72 transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] xl:translate-x-0 ${isSidebarOpen ? "translate-x-0 shadow-[0_0_40px_rgba(0,0,0,0.1)]" : "translate-x-full"}`,
2087
+ children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-[100dvh] max-h-screen w-full flex-col border-l border-l-[#eefafd] bg-white p-3 py-5", children: [
2088
+ !aiSummarized && /* @__PURE__ */ jsx(
2089
+ summarize_button_default,
2090
+ {
2091
+ isSummarizing,
2092
+ onSummarize
2093
+ }
2094
+ ),
2095
+ /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 border-t border-t-[#eefafd] flex-1 overflow-hidden", children: [
2096
+ /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between mb-6 shrink-0", children: [
2097
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2098
+ /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 items-center justify-center rounded-[10px] border border-[#15607b]/20 bg-white shadow-sm", children: /* @__PURE__ */ jsx(Tags, { className: "h-4 w-4 text-[#15607b]" }) }),
2099
+ /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-semibold uppercase tracking-[0.28em] text-[#134a61]", children: "Breakdown" })
2100
+ ] }),
2101
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "rounded-full border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold text-[#134a61] shadow-sm backdrop-blur-md", children: tags.length }) })
2102
+ ] }),
2103
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 overflow-y-auto overflow-x-hidden pb-4 pr-1 custom-scrollbar", children: CATEGORIES.map((cat) => {
2104
+ const catTags = tags.filter((t) => t.category_id === cat.id);
2105
+ if (!catTags.length) return null;
2106
+ const isExpanded = expandedCategories[cat.id];
2107
+ const uniqueTags = Array.from(
2108
+ new Map(
2109
+ catTags.map((tag) => [tag.name.toLowerCase(), tag])
2110
+ ).values()
2111
+ );
2112
+ return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
2113
+ /* @__PURE__ */ jsxs(
2114
+ "div",
2115
+ {
2116
+ onClick: () => setExpandedCategories((prev) => ({
2117
+ [cat.id]: !prev[cat.id]
2118
+ })),
2119
+ className: "group relative flex cursor-pointer items-center gap-3 overflow-hidden rounded-[24px] border border-white/70 px-4 py-3.5 transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-[1px]",
2120
+ style: {
2121
+ background: `linear-gradient(135deg, rgba(255,255,255,0.92), ${cat.hex}18)`,
2122
+ boxShadow: `0 16px 36px ${cat.hex}14, inset 0 1px 0 rgba(255,255,255,0.9)`,
2123
+ border: `1px solid ${cat.hex}50`
2124
+ },
2125
+ children: [
2126
+ /* @__PURE__ */ jsx(
2127
+ "div",
1951
2128
  {
1952
- className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
1953
- title: selectionMenu.text,
1954
- children: [
1955
- '"',
1956
- selectionMenu.text,
1957
- '"'
1958
- ]
2129
+ className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
2130
+ style: {
2131
+ background: `radial-gradient(circle at 15% 20%, ${cat.hex}24, transparent 38%)`
2132
+ }
1959
2133
  }
1960
- )
1961
- ] }),
1962
- /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
1963
- CATEGORIES.filter(
1964
- (cat) => !(cat.id === "LOCATION" && hasLocationTag) && !(cat.id === "SUBLOCATION" && !hasLocationTag)
1965
- ).map((cat) => /* @__PURE__ */ jsxs(
1966
- "button",
2134
+ ),
2135
+ /* @__PURE__ */ jsx(
2136
+ "div",
1967
2137
  {
1968
- onClick: () => {
1969
- const existingTag = tags.find(
1970
- (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
1971
- );
1972
- if (existingTag && existingTag.id) {
1973
- updateTag == null ? void 0 : updateTag(existingTag.id, cat.id);
1974
- } else {
1975
- addTag(cat.id);
1976
- }
2138
+ className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/70 backdrop-blur-md",
2139
+ style: {
2140
+ background: `linear-gradient(135deg, ${cat.color}22, rgba(255,255,255,0.75))`,
2141
+ boxShadow: `0 10px 22px ${cat.color}14`
1977
2142
  },
1978
- 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]",
2143
+ children: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4", color: cat.color })
2144
+ }
2145
+ ),
2146
+ /* @__PURE__ */ jsx(
2147
+ "span",
2148
+ {
2149
+ className: "relative text-[13px] font-semibold tracking-[0.01em]",
1979
2150
  style: { color: cat.color },
1980
- children: [
1981
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1982
- /* @__PURE__ */ jsx(
1983
- cat.icon,
1984
- {
1985
- className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
1986
- style: { color: cat.color }
1987
- }
1988
- ),
1989
- cat.label
1990
- ] }),
1991
- /* @__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" })
1992
- ]
1993
- },
1994
- cat.id
1995
- )),
1996
- tags.some(
1997
- (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
1998
- ) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
1999
- "button",
2151
+ children: cat.label
2152
+ }
2153
+ ),
2154
+ /* @__PURE__ */ jsx("span", { className: "relative ml-auto rounded-full border border-white/70 bg-white/75 px-2.5 py-1 text-[11px] font-semibold text-[#456575] backdrop-blur-md", children: catTags.length }),
2155
+ /* @__PURE__ */ jsx(
2156
+ ChevronDown,
2000
2157
  {
2001
- onClick: (e) => {
2002
- const tagToRemove = tags.find(
2003
- (t) => t.block_id === block.id && t.start_index === selectionMenu.startIndex && t.end_index === selectionMenu.endIndex
2004
- );
2005
- if (tagToRemove) {
2006
- removeTag(e, tagToRemove.id);
2007
- clearSelection();
2008
- }
2009
- },
2010
- 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",
2011
- children: [
2012
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2013
- /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
2014
- "Remove Tag"
2015
- ] }),
2016
- /* @__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" })
2017
- ]
2158
+ className: `relative h-4 w-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "rotate-180" : ""}`,
2159
+ style: { color: cat.color }
2018
2160
  }
2019
- ) })
2020
- ] })
2021
- ]
2022
- }
2023
- )
2024
- ]
2025
- },
2026
- block.id
2027
- ))
2161
+ )
2162
+ ]
2163
+ }
2164
+ ),
2165
+ /* @__PURE__ */ jsx(
2166
+ "div",
2167
+ {
2168
+ className: `grid transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0"}`,
2169
+ children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-start gap-2 py-2", children: uniqueTags.map((tag, index) => /* @__PURE__ */ jsx(
2170
+ "div",
2171
+ {
2172
+ className: "relative flex flex-col items-start",
2173
+ children: /* @__PURE__ */ jsxs(
2174
+ "span",
2175
+ {
2176
+ title: tag.name,
2177
+ onClick: (e) => {
2178
+ e.stopPropagation();
2179
+ if (cat.id !== "PROP" && cat.id !== "SET_PROP" && cat.id !== "CAST")
2180
+ return;
2181
+ if ((editingTagData == null ? void 0 : editingTagData.tag.id) === tag.id) {
2182
+ setEditingTagData(null);
2183
+ } else {
2184
+ const rect = e.currentTarget.getBoundingClientRect();
2185
+ setPopupPlacement({
2186
+ alignRight: rect.left > window.innerWidth - 240,
2187
+ alignBottom: rect.bottom > window.innerHeight - 250
2188
+ });
2189
+ setTagForm({
2190
+ quantity: tag.quantity || 1,
2191
+ look: tag.look || "",
2192
+ age: tag.age || ""
2193
+ });
2194
+ setEditingTagData({
2195
+ tag,
2196
+ catId: cat.id,
2197
+ catColor: cat.color,
2198
+ rect
2199
+ });
2200
+ }
2201
+ },
2202
+ className: `inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300 ${cat.id === "PROP" || cat.id === "SET_PROP" || cat.id === "CAST" ? "cursor-pointer hover:scale-105 shadow-sm" : ""}`,
2203
+ style: {
2204
+ color: cat.color,
2205
+ background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
2206
+ borderColor: `${cat.color}28`
2207
+ },
2208
+ children: [
2209
+ tag.name,
2210
+ (cat.id === "PROP" || cat.id === "SET_PROP") && tag.quantity && tag.quantity > 1 ? /* @__PURE__ */ jsxs("span", { className: "ml-1.5 opacity-80 font-bold", children: [
2211
+ "x",
2212
+ tag.quantity
2213
+ ] }) : null
2214
+ ]
2215
+ }
2216
+ )
2217
+ },
2218
+ index
2219
+ )) }) })
2220
+ }
2221
+ )
2222
+ ] }, cat.id);
2223
+ }) })
2224
+ ] })
2225
+ ] })
2028
2226
  }
2029
- ),
2030
- /* @__PURE__ */ jsxs("div", { className: "relative bg-[#fdfdfc] shadow-md 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: [
2031
- /* @__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: [
2032
- /* @__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" }) }),
2033
- "Scene Brief"
2034
- ] }),
2035
- /* @__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(
2036
- "textarea",
2037
- {
2038
- value: sceneBrief,
2039
- onChange: (e) => setSceneBrief(e.target.value),
2040
- placeholder: "Write a brief description or notes for this scene...",
2041
- 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 select-none",
2042
- style: {
2043
- lineHeight: "1.6"
2044
- }
2045
- }
2046
- ) })
2047
- ] })
2227
+ )
2048
2228
  ] }),
2049
- /* @__PURE__ */ jsxs(
2050
- "button",
2051
- {
2052
- onClick: () => setIsSidebarOpen(true),
2053
- className: "fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#15607b] text-white shadow-[0_8px_30px_rgba(21,96,123,0.3)] transition-transform hover:scale-105 active:scale-95 xl:hidden",
2054
- children: [
2055
- /* @__PURE__ */ jsx(Tags, { className: "h-6 w-6" }),
2056
- tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] font-bold text-white shadow-sm border-2 border-white", children: tags.length })
2057
- ]
2058
- }
2059
- ),
2060
- isSidebarOpen && /* @__PURE__ */ jsx(
2061
- "div",
2062
- {
2063
- className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
2064
- onClick: () => setIsSidebarOpen(false)
2065
- }
2066
- ),
2067
- /* @__PURE__ */ jsx(
2068
- "div",
2069
- {
2070
- className: `fixed xl:absolute top-0 right-0 z-50 h-full w-72 transform transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] xl:translate-x-0 ${isSidebarOpen ? "translate-x-0 shadow-[0_0_40px_rgba(0,0,0,0.1)]" : "translate-x-full"}`,
2071
- children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-[100dvh] max-h-screen w-full flex-col border-l border-l-[#eefafd] bg-white p-3 py-5", children: [
2072
- !aiSummarized && /* @__PURE__ */ jsx(
2073
- summarize_button_default,
2074
- {
2075
- isSummarizing,
2076
- onSummarize
2077
- }
2078
- ),
2079
- /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 border-t border-t-[#eefafd] flex-1 overflow-hidden", children: [
2080
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between mb-6 shrink-0", children: [
2081
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2082
- /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 items-center justify-center rounded-[10px] border border-[#15607b]/20 bg-white shadow-sm", children: /* @__PURE__ */ jsx(Tags, { className: "h-4 w-4 text-[#15607b]" }) }),
2083
- /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-semibold uppercase tracking-[0.28em] text-[#134a61]", children: "Breakdown" })
2084
- ] }),
2085
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "rounded-full border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold text-[#134a61] shadow-sm backdrop-blur-md", children: tags.length }) })
2229
+ editingTagData && /* @__PURE__ */ jsxs(Fragment, { children: [
2230
+ /* @__PURE__ */ jsx(
2231
+ "div",
2232
+ {
2233
+ className: "fixed inset-0 z-[100]",
2234
+ onClick: (e) => {
2235
+ e.stopPropagation();
2236
+ setEditingTagData(null);
2237
+ }
2238
+ }
2239
+ ),
2240
+ /* @__PURE__ */ jsxs(
2241
+ "div",
2242
+ {
2243
+ className: `p-3.5 bg-white/90 backdrop-blur-2xl rounded-[1.25rem] shadow-[0_10px_40px_rgb(0,0,0,0.12)] border border-white/60 z-[101] w-56 animate-in fade-in zoom-in-95 duration-200 ease-out fixed`,
2244
+ style: {
2245
+ top: popupPlacement.alignBottom ? "auto" : editingTagData.rect.bottom + 8,
2246
+ bottom: popupPlacement.alignBottom ? window.innerHeight - editingTagData.rect.top + 8 : "auto",
2247
+ left: popupPlacement.alignRight ? "auto" : editingTagData.rect.left,
2248
+ right: popupPlacement.alignRight ? window.innerWidth - editingTagData.rect.right : "auto"
2249
+ },
2250
+ onClick: (e) => e.stopPropagation(),
2251
+ children: [
2252
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3 border-b border-slate-100 pb-2.5", children: [
2253
+ /* @__PURE__ */ jsx("span", { className: "text-[10px] font-extrabold text-slate-400 uppercase tracking-widest drop-shadow-sm", children: "Details" }),
2254
+ /* @__PURE__ */ jsx(
2255
+ "button",
2256
+ {
2257
+ onClick: () => setEditingTagData(null),
2258
+ className: "hover:bg-slate-100/80 p-1.5 rounded-full transition-colors active:scale-95",
2259
+ children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5 text-slate-500" })
2260
+ }
2261
+ )
2086
2262
  ] }),
2087
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 overflow-y-auto overflow-x-hidden pb-4 pr-1 custom-scrollbar", children: CATEGORIES.map((cat) => {
2088
- const catTags = tags.filter((t) => t.category_id === cat.id);
2089
- if (!catTags.length) return null;
2090
- const isExpanded = expandedCategories[cat.id];
2091
- const uniqueTags = Array.from(
2092
- new Map(
2093
- catTags.map((tag) => [tag.name.toLowerCase(), tag])
2094
- ).values()
2095
- );
2096
- return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
2097
- /* @__PURE__ */ jsxs(
2098
- "div",
2263
+ (editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
2264
+ /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Quantity" }),
2265
+ /* @__PURE__ */ jsx(
2266
+ "input",
2267
+ {
2268
+ type: "number",
2269
+ min: "1",
2270
+ value: tagForm.quantity,
2271
+ onChange: (e) => {
2272
+ const val = Math.max(1, parseInt(e.target.value) || 1);
2273
+ setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
2274
+ quantity: val
2275
+ }));
2276
+ },
2277
+ className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
2278
+ }
2279
+ )
2280
+ ] }),
2281
+ editingTagData.catId === "CAST" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
2282
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
2283
+ /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Look" }),
2284
+ /* @__PURE__ */ jsx(
2285
+ "input",
2099
2286
  {
2100
- onClick: () => setExpandedCategories((prev) => ({
2101
- [cat.id]: !prev[cat.id]
2102
- })),
2103
- className: "group relative flex cursor-pointer items-center gap-3 overflow-hidden rounded-[24px] border border-white/70 px-4 py-3.5 transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-[1px]",
2104
- style: {
2105
- background: `linear-gradient(135deg, rgba(255,255,255,0.92), ${cat.hex}18)`,
2106
- boxShadow: `0 16px 36px ${cat.hex}14, inset 0 1px 0 rgba(255,255,255,0.9)`,
2107
- border: `1px solid ${cat.hex}50`
2287
+ type: "text",
2288
+ placeholder: "e.g. Dirty, Formal",
2289
+ value: tagForm.look,
2290
+ onChange: (e) => {
2291
+ setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
2292
+ look: e.target.value
2293
+ }));
2108
2294
  },
2109
- children: [
2110
- /* @__PURE__ */ jsx(
2111
- "div",
2112
- {
2113
- className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
2114
- style: {
2115
- background: `radial-gradient(circle at 15% 20%, ${cat.hex}24, transparent 38%)`
2116
- }
2117
- }
2118
- ),
2119
- /* @__PURE__ */ jsx(
2120
- "div",
2121
- {
2122
- className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/70 backdrop-blur-md",
2123
- style: {
2124
- background: `linear-gradient(135deg, ${cat.color}22, rgba(255,255,255,0.75))`,
2125
- boxShadow: `0 10px 22px ${cat.color}14`
2126
- },
2127
- children: /* @__PURE__ */ jsx(cat.icon, { className: "h-4 w-4", color: cat.color })
2128
- }
2129
- ),
2130
- /* @__PURE__ */ jsx(
2131
- "span",
2132
- {
2133
- className: "relative text-[13px] font-semibold tracking-[0.01em]",
2134
- style: { color: cat.color },
2135
- children: cat.label
2136
- }
2137
- ),
2138
- /* @__PURE__ */ jsx("span", { className: "relative ml-auto rounded-full border border-white/70 bg-white/75 px-2.5 py-1 text-[11px] font-semibold text-[#456575] backdrop-blur-md", children: catTags.length }),
2139
- /* @__PURE__ */ jsx(
2140
- ChevronDown,
2141
- {
2142
- className: `relative h-4 w-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "rotate-180" : ""}`,
2143
- style: { color: cat.color }
2144
- }
2145
- )
2146
- ]
2295
+ className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700 placeholder:text-slate-400 placeholder:font-normal"
2147
2296
  }
2148
- ),
2297
+ )
2298
+ ] }),
2299
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
2300
+ /* @__PURE__ */ jsx("label", { className: "text-[11px] font-bold text-slate-600 ml-1", children: "Age" }),
2149
2301
  /* @__PURE__ */ jsx(
2150
- "div",
2302
+ "input",
2151
2303
  {
2152
- className: `grid transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "grid-rows-[1fr] opacity-100 mt-3" : "grid-rows-[0fr] opacity-0"}`,
2153
- children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-start gap-2 py-2", children: uniqueTags.map((tag, index) => /* @__PURE__ */ jsx(
2154
- "span",
2155
- {
2156
- title: tag.name,
2157
- className: "inline-block max-w-full truncate text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300",
2158
- style: {
2159
- color: cat.color,
2160
- background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
2161
- borderColor: `${cat.color}28`
2162
- },
2163
- children: tag.name
2164
- },
2165
- index
2166
- )) }) })
2304
+ type: "number",
2305
+ min: "0",
2306
+ max: "100",
2307
+ value: tagForm.age,
2308
+ onChange: (e) => {
2309
+ let val = parseInt(e.target.value);
2310
+ if (isNaN(val)) {
2311
+ setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
2312
+ age: ""
2313
+ }));
2314
+ return;
2315
+ }
2316
+ val = Math.max(0, Math.min(100, val));
2317
+ setTagForm((prev) => __spreadProps(__spreadValues({}, prev), {
2318
+ age: val.toString()
2319
+ }));
2320
+ },
2321
+ className: "w-full text-[13px] px-3 py-2 rounded-xl border border-slate-200/80 outline-none focus:border-[#15607b] focus:ring-2 focus:ring-[#15607b]/20 transition-all bg-slate-50/50 focus:bg-white font-semibold text-slate-700"
2167
2322
  }
2168
2323
  )
2169
- ] }, cat.id);
2170
- }) })
2171
- ] })
2172
- ] })
2173
- }
2174
- )
2175
- ] }) });
2324
+ ] })
2325
+ ] }),
2326
+ /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
2327
+ "button",
2328
+ {
2329
+ onClick: (e) => {
2330
+ e.stopPropagation();
2331
+ if (editingTagData.tag.id) {
2332
+ updateTag == null ? void 0 : updateTag(editingTagData.tag.id, null, __spreadValues(__spreadValues({}, editingTagData.catId === "PROP" || editingTagData.catId === "SET_PROP" ? { quantity: tagForm.quantity } : {}), editingTagData.catId === "CAST" ? { look: tagForm.look, age: tagForm.age } : {}));
2333
+ }
2334
+ setEditingTagData(null);
2335
+ },
2336
+ className: "w-full bg-[#15607b] hover:bg-[#134a61] text-white text-[12px] font-bold py-2.5 rounded-xl transition-all shadow-[0_4px_12px_rgba(21,96,123,0.2)] hover:shadow-[0_6px_16px_rgba(21,96,123,0.3)] active:scale-[0.98]",
2337
+ children: "Update Details"
2338
+ }
2339
+ ) })
2340
+ ]
2341
+ }
2342
+ )
2343
+ ] })
2344
+ ] });
2176
2345
  }
2177
2346
  function useScriptBreakdownScene(options) {
2178
2347
  const [tags, setTags] = useState(options.preLoadedTags || []);
@@ -2270,14 +2439,21 @@ function useScriptBreakdownScene(options) {
2270
2439
  if (!aiTag.block_id || !aiTag.category_id || typeof aiTag.start_index !== "number" || typeof aiTag.end_index !== "number") {
2271
2440
  return;
2272
2441
  }
2273
- newTags.push({
2442
+ const newTag = {
2274
2443
  id: aiTag.id || uuid(),
2275
2444
  block_id: String(aiTag.block_id).startsWith("par") ? String(aiTag.block_id).substring(3) : String(aiTag.block_id),
2276
2445
  category_id: aiTag.category_id,
2277
2446
  name: aiTag.name,
2278
2447
  start_index: aiTag.start_index,
2279
2448
  end_index: aiTag.end_index
2280
- });
2449
+ };
2450
+ if (aiTag.category_id === "PROP" || aiTag.category_id === "SET_PROP") {
2451
+ newTag.quantity = 1;
2452
+ } else if (aiTag.category_id === "CAST") {
2453
+ newTag.look = "";
2454
+ newTag.age = "";
2455
+ }
2456
+ newTags.push(newTag);
2281
2457
  });
2282
2458
  if (newTags.length > 0) {
2283
2459
  const originalTags = tags;
@@ -2329,7 +2505,9 @@ function useScriptBreakdownScene(options) {
2329
2505
  category_id: "CAST",
2330
2506
  name: charName,
2331
2507
  start_index: startIndex,
2332
- end_index: startIndex + charName.length
2508
+ end_index: startIndex + charName.length,
2509
+ look: "",
2510
+ age: ""
2333
2511
  });
2334
2512
  }
2335
2513
  }
@@ -2542,6 +2720,12 @@ function useScriptBreakdownScene(options) {
2542
2720
  start_index: selectionMenu.startIndex,
2543
2721
  end_index: selectionMenu.endIndex
2544
2722
  };
2723
+ if (categoryId === "PROP" || categoryId === "SET_PROP") {
2724
+ newTag.quantity = 1;
2725
+ } else if (categoryId === "CAST") {
2726
+ newTag.look = "";
2727
+ newTag.age = "";
2728
+ }
2545
2729
  setTags((prev) => {
2546
2730
  const filtered = prev.filter(
2547
2731
  (t) => t.block_id !== newTag.block_id || !(newTag.end_index > t.start_index && newTag.start_index < t.end_index)
@@ -2571,22 +2755,36 @@ function useScriptBreakdownScene(options) {
2571
2755
  setTags((prev) => [...prev, tagToRemove]);
2572
2756
  }
2573
2757
  };
2574
- const updateTag = async (id, categoryId) => {
2575
- var _a;
2758
+ const updateTag = async (id, categoryId, details) => {
2759
+ var _a, _b, _c, _d;
2576
2760
  const tagToUpdate = tags.find((t) => t.id === id);
2577
2761
  if (!tagToUpdate) return;
2762
+ const updatedFields = __spreadValues({}, details);
2763
+ if (categoryId) {
2764
+ updatedFields.category_id = categoryId;
2765
+ if (categoryId === "PROP" || categoryId === "SET_PROP") {
2766
+ updatedFields.quantity = (_a = tagToUpdate.quantity) != null ? _a : 1;
2767
+ } else if (categoryId === "CAST") {
2768
+ updatedFields.look = (_b = tagToUpdate.look) != null ? _b : "";
2769
+ updatedFields.age = (_c = tagToUpdate.age) != null ? _c : "";
2770
+ }
2771
+ }
2578
2772
  setTags(
2579
- (prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { category_id: categoryId }) : t)
2773
+ (prev) => prev.map((t) => {
2774
+ if (t.id === id) return __spreadValues(__spreadValues({}, t), updatedFields);
2775
+ if (details && t.name === tagToUpdate.name && t.category_id === tagToUpdate.category_id) {
2776
+ return __spreadValues(__spreadValues({}, t), details);
2777
+ }
2778
+ return t;
2779
+ })
2580
2780
  );
2581
- clearSelection();
2781
+ if (categoryId) clearSelection();
2582
2782
  try {
2583
- await ((_a = options.onTagUpdated) == null ? void 0 : _a.call(options, id, categoryId));
2783
+ await ((_d = options.onTagUpdated) == null ? void 0 : _d.call(options, id, categoryId || null, details));
2584
2784
  } catch (error2) {
2585
2785
  console.error("Failed to update tag:", error2);
2586
2786
  setTags(
2587
- (prev) => prev.map(
2588
- (t) => t.id === id ? __spreadProps(__spreadValues({}, t), { category_id: tagToUpdate.category_id }) : t
2589
- )
2787
+ (prev) => prev.map((t) => t.id === id ? tagToUpdate : t)
2590
2788
  );
2591
2789
  }
2592
2790
  };