@vishu1301/script-writing 1.2.7 → 1.2.9

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 +193 -218
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +4 -2
  4. package/dist/index.d.ts +4 -2
  5. package/dist/index.js +194 -219
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
- import React__default, { KeyboardEvent } from 'react';
3
+ import React__default, { KeyboardEvent, ElementType } from 'react';
4
4
 
5
5
  type BlockType = "SCENE_HEADING" | "ACTION" | "CHARACTER" | "PARENTHETICAL" | "DIALOGUE" | "TRANSITION";
6
6
  type TimeOfDay = "DAY" | "NIGHT";
@@ -89,6 +89,7 @@ declare const CATEGORIES: {
89
89
  label: string;
90
90
  color: string;
91
91
  hex: string;
92
+ icon: ElementType;
92
93
  }[];
93
94
 
94
95
  declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, }: {
@@ -128,6 +129,7 @@ interface UseScriptBreakdownSceneOptions {
128
129
  onTagRemoved?: (tagId: string) => void;
129
130
  onTagUpdated?: (tagId: string, categoryId: ElementCategory) => void;
130
131
  preLoadedTags?: Tag[];
132
+ preLoadedTagsLoading?: boolean;
131
133
  }
132
134
  declare function useScriptBreakdownScene(options: UseScriptBreakdownSceneOptions): {
133
135
  scene: any;
@@ -149,7 +151,7 @@ declare function useScriptBreakdownScene(options: UseScriptBreakdownSceneOptions
149
151
  updateTag: (id: string, categoryId: ElementCategory) => Promise<void>;
150
152
  removeTag: (e: React.MouseEvent, id: string) => Promise<void>;
151
153
  clearSelection: () => void;
152
- menuPlacement: "bottom" | "top";
154
+ menuPlacement: "top" | "bottom";
153
155
  menuRef: React$1.RefObject<HTMLDivElement | null>;
154
156
  sceneBrief: string;
155
157
  setSceneBrief: React$1.Dispatch<React$1.SetStateAction<string>>;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
- import React__default, { KeyboardEvent } from 'react';
3
+ import React__default, { KeyboardEvent, ElementType } from 'react';
4
4
 
5
5
  type BlockType = "SCENE_HEADING" | "ACTION" | "CHARACTER" | "PARENTHETICAL" | "DIALOGUE" | "TRANSITION";
6
6
  type TimeOfDay = "DAY" | "NIGHT";
@@ -89,6 +89,7 @@ declare const CATEGORIES: {
89
89
  label: string;
90
90
  color: string;
91
91
  hex: string;
92
+ icon: ElementType;
92
93
  }[];
93
94
 
94
95
  declare function ScriptBreakdownSceneView({ blocks, characters, isLoading, sceneNumber, tags, selectionMenu, handleMouseUp, addTag, updateTag, removeTag, clearSelection, menuPlacement, menuRef, sceneBrief, setSceneBrief, onSummarize, isSummarizing, aiSummarized, }: {
@@ -128,6 +129,7 @@ interface UseScriptBreakdownSceneOptions {
128
129
  onTagRemoved?: (tagId: string) => void;
129
130
  onTagUpdated?: (tagId: string, categoryId: ElementCategory) => void;
130
131
  preLoadedTags?: Tag[];
132
+ preLoadedTagsLoading?: boolean;
131
133
  }
132
134
  declare function useScriptBreakdownScene(options: UseScriptBreakdownSceneOptions): {
133
135
  scene: any;
@@ -149,7 +151,7 @@ declare function useScriptBreakdownScene(options: UseScriptBreakdownSceneOptions
149
151
  updateTag: (id: string, categoryId: ElementCategory) => Promise<void>;
150
152
  removeTag: (e: React.MouseEvent, id: string) => Promise<void>;
151
153
  clearSelection: () => void;
152
- menuPlacement: "bottom" | "top";
154
+ menuPlacement: "top" | "bottom";
153
155
  menuRef: React$1.RefObject<HTMLDivElement | null>;
154
156
  sceneBrief: string;
155
157
  setSceneBrief: React$1.Dispatch<React$1.SetStateAction<string>>;
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
2
- import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, Upload, Lock, Unlock, Save, FileDown, RefreshCcw, Cog, ArrowRight, User, ChevronRight, Loader2, AlignLeft, Tags } 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 } 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';
@@ -408,7 +408,14 @@ function ScreenplayEditorView({
408
408
  }) }),
409
409
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
410
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(PdfImporter, { disabled: isLocked, onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsx(Upload, { className: "w-[18px] h-[18px]" }) }) }),
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
+ ),
412
419
  onToggleLock && /* @__PURE__ */ jsx(
413
420
  "button",
414
421
  {
@@ -1718,47 +1725,40 @@ var handleSyncWithCloud = (blocks, sceneNumbers, onSaveAsSbx, project_name) => {
1718
1725
  }
1719
1726
  }
1720
1727
  };
1721
-
1722
- // app/types/script-breakdown.types.tsx
1723
1728
  var CATEGORIES = [
1724
- { id: "CAST", label: "Cast", color: "#7C3AED", hex: "#A78BFA" },
1725
- { id: "PROP", label: "Prop", color: "#FF6A00", hex: "#FFB86B" },
1726
- { id: "COSTUME", label: "Costume", color: "#FF2E93", hex: "#FF8AC2" },
1727
- { id: "VEHICLE", label: "Vehicle", color: "#00A6FF", hex: "#6ED6FF" },
1728
- { id: "SET_PROP", label: "Set Prop", color: "#00C853", hex: "#69F0AE" },
1729
- { id: "EXTRA", label: "Extra", color: "#00B8D4", hex: "#62EFFF" },
1730
- { id: "LOCATION", label: "Location", color: "#FFB300", hex: "#FFE082" },
1731
- { id: "SUBLOCATION", label: "Sublocation", color: "#004CFF", hex: "#004CFF" },
1732
- { id: "OTHER", label: "Other", color: "#9E9E9E", hex: "#E0E0E0" }
1729
+ { id: "CAST", label: "Cast", color: "#F97316", hex: "#FDBA74", icon: Users },
1730
+ { id: "PROP", label: "Prop", color: "#7C3AED", hex: "#C4B5FD", icon: Box },
1731
+ { id: "COSTUME", label: "Costume", color: "#DB2777", hex: "#F9A8D4", icon: Shirt },
1732
+ { id: "VEHICLE", label: "Vehicle", color: "#2563EB", hex: "#93C5FD", icon: Car },
1733
+ { id: "SET_PROP", label: "Set Prop", color: "#92400E", hex: "#FCD34D", icon: Armchair },
1734
+ { id: "EXTRA", label: "Extra", color: "#F59E0B", hex: "#FDE68A", icon: UserPlus },
1735
+ { id: "LOCATION", label: "Location", color: "#059669", hex: "#6EE7B7", icon: MapPin },
1736
+ { id: "SUBLOCATION", label: "Sublocation", color: "#65A30D", hex: "#BEF264", icon: Map$1 }
1737
+ // { id: "OTHER", label: "Other", color: "#475569", hex: "#CBD5F5", icon: Tags }
1733
1738
  ];
1734
- var PopcornIcon = ({ isSummarizing }) => /* @__PURE__ */ jsxs(
1735
- "svg",
1736
- {
1737
- xmlns: "http://www.w3.org/2000/svg",
1738
- width: "24",
1739
- height: "24",
1740
- viewBox: "0 0 24 24",
1741
- fill: "none",
1742
- strokeLinecap: "round",
1743
- strokeLinejoin: "round",
1744
- className: `w-6 h-6 transition-all duration-500 ${isSummarizing ? "animate-cook" : "group-hover:scale-110 group-hover:-rotate-12"}`,
1745
- children: [
1746
- /* @__PURE__ */ jsx(
1747
- "path",
1748
- {
1749
- d: "M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4",
1750
- stroke: "#facc15",
1751
- strokeWidth: "2"
1752
- }
1753
- ),
1754
- /* @__PURE__ */ jsxs("g", { stroke: "#ef4444", strokeWidth: "2", children: [
1755
- /* @__PURE__ */ jsx("path", { d: "M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z" }),
1756
- /* @__PURE__ */ jsx("path", { d: "M10 22 9 8", strokeWidth: "1" }),
1757
- /* @__PURE__ */ jsx("path", { d: "m14 22 1-14", strokeWidth: "1" })
1739
+ var CinemaAIIcon = ({ isProcessing }) => {
1740
+ return /* @__PURE__ */ jsx("div", { className: "relative flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsx(
1741
+ "svg",
1742
+ {
1743
+ viewBox: "0 0 24 24",
1744
+ className: `w-full h-full stroke-[#1e769c] ${isProcessing ? "animate-[spin_2s_linear_infinite]" : ""}`,
1745
+ fill: "none",
1746
+ strokeWidth: "1.75",
1747
+ strokeLinecap: "round",
1748
+ strokeLinejoin: "round",
1749
+ children: isProcessing ? /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1750
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.5" }),
1751
+ /* @__PURE__ */ jsx("path", { d: "M7 2v20" }),
1752
+ /* @__PURE__ */ jsx("path", { d: "M17 2v20" }),
1753
+ /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
1754
+ /* @__PURE__ */ jsx("path", { d: "M2 7h5" }),
1755
+ /* @__PURE__ */ jsx("path", { d: "M2 17h5" }),
1756
+ /* @__PURE__ */ jsx("path", { d: "M17 17h5" }),
1757
+ /* @__PURE__ */ jsx("path", { d: "M17 7h5" })
1758
1758
  ] })
1759
- ]
1760
- }
1761
- );
1759
+ }
1760
+ ) });
1761
+ };
1762
1762
  var SummarizeButton = ({
1763
1763
  onSummarize,
1764
1764
  isSummarizing
@@ -1768,140 +1768,27 @@ var SummarizeButton = ({
1768
1768
  {
1769
1769
  onClick: onSummarize,
1770
1770
  disabled: isSummarizing,
1771
- className: `group relative w-full py-4 px-8 rounded-[3rem] transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] border ${isSummarizing ? "bg-zinc-100 border-zinc-300 opacity-100 cursor-wait shadow-inner" : "bg-gradient-to-b from-white via-zinc-50 to-zinc-100 border-white/70 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.8)] hover:shadow-[0_20px_50px_-15px_rgba(139,92,246,0.3)] hover:-translate-y-[2px] active:scale-[0.98]"}`,
1771
+ className: `relative inline-flex items-center justify-center overflow-hidden px-7 py-3.5 rounded-[2.5rem] border outline-none transition-all duration-300 ease-out ${isSummarizing ? "border-[#7acee6] bg-[#d5f1f8] cursor-wait shadow-[0_0_0_4px_#eefafd]" : "border-[#b0e3f1] bg-[#eefafd] cursor-pointer hover:border-[#7acee6] hover:bg-[#d5f1f8] hover:shadow-[0_8px_24px_-6px_rgba(32,146,186,0.18)] hover:-translate-y-[1px]"}`,
1772
1772
  children: [
1773
- /* @__PURE__ */ jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-700", children: /* @__PURE__ */ jsx(
1774
- "span",
1775
- {
1776
- className: "absolute inset-0 blur-3xl opacity-20",
1777
- style: {
1778
- backgroundImage: "conic-gradient(from 0deg at 50% 50%, #c084fc, transparent 60%, #fb7185, transparent 90%)",
1779
- animation: "custom-spin 10s linear infinite"
1780
- }
1781
- }
1782
- ) }),
1783
1773
  /* @__PURE__ */ jsx(
1784
1774
  "span",
1785
1775
  {
1786
- className: `absolute inset-0 transition-opacity duration-700 ${isSummarizing ? "opacity-100" : "opacity-0"}`,
1787
- style: {
1788
- backgroundImage: "radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1), transparent 70%)"
1789
- }
1776
+ className: `absolute inset-0 rounded-[inherit] ${isSummarizing ? "bg-[linear-gradient(135deg,#d5f1f8_0%,#b0e3f1_100%)]" : "bg-[linear-gradient(135deg,#eefafd_0%,#d5f1f8_100%)]"}`
1790
1777
  }
1791
1778
  ),
1792
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center gap-4", children: [
1793
- /* @__PURE__ */ jsx("style", { children: `
1794
- @keyframes custom-spin {
1795
- from { transform: rotate(0deg); }
1796
- to { transform: rotate(360deg); }
1797
- }
1798
- @keyframes kernel-pop {
1799
- 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
1800
- 10% { opacity: 1; transform: translate(var(--tx1), var(--ty1)) scale(1.3) rotate(45deg); }
1801
- 40% { transform: translate(var(--tx2), var(--ty2)) scale(1) rotate(180deg); opacity: 1; }
1802
- 100% { transform: translate(var(--tx3), var(--ty3)) scale(0.4) rotate(360deg); opacity: 0; }
1803
- }
1804
- @keyframes icon-cook {
1805
- 0%, 100% { transform: scale(1.1) translateY(0); }
1806
- 50% { transform: scale(0.9, 1.1) translateY(-3px) rotate(3deg); }
1807
- }
1808
- .animate-kernel {
1809
- animation: kernel-pop var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
1810
- animation-delay: var(--delay);
1811
- filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); /* Added shadow for visibility */
1812
- }
1813
- .animate-cook { animation: icon-cook 0.3s ease-in-out infinite; }
1814
- ` }),
1815
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
1816
- /* @__PURE__ */ jsx(PopcornIcon, { isSummarizing }),
1817
- isSummarizing && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
1818
- /* @__PURE__ */ jsx(
1819
- "svg",
1820
- {
1821
- className: "animate-kernel absolute w-4 h-4",
1822
- style: {
1823
- "--dur": "1.2s",
1824
- "--delay": "0s",
1825
- "--tx1": "-18px",
1826
- "--ty1": "-22px",
1827
- "--tx2": "-28px",
1828
- "--ty2": "-28px",
1829
- "--tx3": "-38px",
1830
- "--ty3": "12px"
1831
- },
1832
- viewBox: "0 0 24 24",
1833
- children: /* @__PURE__ */ jsx(
1834
- "path",
1835
- {
1836
- d: "M12 2a4 4 0 0 0-4 4 4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4-4z",
1837
- fill: "#FBBF24",
1838
- stroke: "#F59E0B",
1839
- strokeWidth: "0.5"
1840
- }
1841
- )
1842
- }
1843
- ),
1844
- /* @__PURE__ */ jsx(
1845
- "svg",
1846
- {
1847
- className: "animate-kernel absolute w-3.5 h-3.5",
1848
- style: {
1849
- "--dur": "1.5s",
1850
- "--delay": "0.3s",
1851
- "--tx1": "18px",
1852
- "--ty1": "-28px",
1853
- "--tx2": "28px",
1854
- "--ty2": "-38px",
1855
- "--tx3": "38px",
1856
- "--ty3": "18px"
1857
- },
1858
- viewBox: "0 0 24 24",
1859
- children: /* @__PURE__ */ jsx(
1860
- "path",
1861
- {
1862
- d: "M12 3c-2 0-3 1-4 2-1-1-3-1-4 1-1 2 0 4 1 5-1 1-1 3 1 4 2 1 4 0 6-1 2 1 4 2 6 1 2-1 2-3 1-4 1-1 2-3 1-5-1-2-3-2-4-1-1-1-2-2-4-2z",
1863
- fill: "#FDE68A",
1864
- stroke: "#FBBF24",
1865
- strokeWidth: "0.5"
1866
- }
1867
- )
1868
- }
1869
- ),
1870
- /* @__PURE__ */ jsx(
1871
- "svg",
1872
- {
1873
- className: "animate-kernel absolute w-4 h-4",
1874
- style: {
1875
- "--dur": "1.8s",
1876
- "--delay": "0.7s",
1877
- "--tx1": "-2px",
1878
- "--ty1": "-28px",
1879
- "--tx2": "5px",
1880
- "--ty2": "-48px",
1881
- "--tx3": "10px",
1882
- "--ty3": "18px"
1883
- },
1884
- viewBox: "0 0 24 24",
1885
- children: /* @__PURE__ */ jsx(
1886
- "path",
1887
- {
1888
- d: "M12 2a4 4 0 0 0-4 4 4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4-4z",
1889
- fill: "#FEF3C7"
1890
- }
1891
- )
1892
- }
1893
- )
1894
- ] })
1895
- ] }),
1896
- /* @__PURE__ */ jsx(
1897
- "span",
1898
- {
1899
- className: `text-[12px] font-bold tracking-[0.25em] uppercase transition-all duration-300 ${isSummarizing ? "text-violet-700" : "text-zinc-500 group-hover:text-zinc-900"}`,
1900
- children: isSummarizing ? "Summarizing..." : "Summarize Scene"
1901
- }
1902
- )
1903
- ] }),
1904
- /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/40 to-transparent" })
1779
+ /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex items-center gap-3", children: [
1780
+ /* @__PURE__ */ jsx(CinemaAIIcon, { isProcessing: isSummarizing }),
1781
+ /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start leading-none", children: [
1782
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-[#1d5b79] tracking-[0.01em]", children: isSummarizing ? "Analyzing Scene..." : "Summarize Scene" }),
1783
+ /* @__PURE__ */ jsx(
1784
+ "span",
1785
+ {
1786
+ className: `text-[9px] font-medium uppercase tracking-[0.12em] mt-1 ${isSummarizing ? "text-[#2092ba]" : "text-[#3cafd4]"}`,
1787
+ children: isSummarizing ? "AI Engine Active" : ""
1788
+ }
1789
+ )
1790
+ ] })
1791
+ ] })
1905
1792
  ]
1906
1793
  }
1907
1794
  );
@@ -1927,6 +1814,9 @@ function ScriptBreakdownSceneView({
1927
1814
  isSummarizing,
1928
1815
  aiSummarized = false
1929
1816
  }) {
1817
+ const [expanded, setExpanded] = useState(false);
1818
+ const [expandedCategories, setExpandedCategories] = useState({});
1819
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
1930
1820
  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
1931
1821
  useEffect(() => {
1932
1822
  const fontId = "google-font-courier-prime";
@@ -2016,8 +1906,8 @@ function ScriptBreakdownSceneView({
2016
1906
  }
2017
1907
  return nodes;
2018
1908
  };
2019
- 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: [
2020
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
1909
+ return /* @__PURE__ */ jsx("div", { className: "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", children: [
1910
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 min-h-screen", children: [
2021
1911
  /* @__PURE__ */ jsx(
2022
1912
  "div",
2023
1913
  {
@@ -2090,10 +1980,10 @@ function ScriptBreakdownSceneView({
2090
1980
  children: [
2091
1981
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2092
1982
  /* @__PURE__ */ jsx(
2093
- "div",
1983
+ cat.icon,
2094
1984
  {
2095
- className: "w-2 h-2 rounded-full shadow-sm group-hover:scale-125 transition-transform duration-300",
2096
- style: { backgroundColor: cat.hex }
1985
+ className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
1986
+ style: { color: cat.color }
2097
1987
  }
2098
1988
  ),
2099
1989
  cat.label
@@ -2156,52 +2046,131 @@ function ScriptBreakdownSceneView({
2156
2046
  ) })
2157
2047
  ] })
2158
2048
  ] }),
2159
- /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-6 sticky top-6", children: [
2160
- !aiSummarized && /* @__PURE__ */ jsx(
2161
- summarize_button_default,
2162
- {
2163
- isSummarizing,
2164
- onSummarize
2165
- }
2166
- ),
2167
- /* @__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 w-full", children: [
2168
- /* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
2169
- /* @__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" }) }),
2170
- "Tags",
2171
- /* @__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 })
2172
- ] }),
2173
- tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
2174
- if (cat.id === "SUBLOCATION" && !hasLocationTag) return null;
2175
- const catTags = Array.from(
2176
- new Map(
2177
- tags.filter((t) => t.category_id === cat.id).map((tag) => [tag.name.toLowerCase(), tag])
2178
- ).values()
2179
- );
2180
- if (catTags.length === 0) return null;
2181
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
2182
- /* @__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: [
2183
- /* @__PURE__ */ jsx(
2184
- "div",
2185
- {
2186
- className: "w-2 h-2 rounded-full shadow-sm",
2187
- style: { backgroundColor: cat.hex }
2188
- }
2189
- ),
2190
- cat.label
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__ */ jsxs(
2068
+ "div",
2069
+ {
2070
+ className: `fixed top-0 right-0 z-50 h-screen w-72 transform bg-white flex flex-col border-l-[#eefafd] border-l p-3 py-5 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: [
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 }) })
2191
2086
  ] }),
2192
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag, index) => /* @__PURE__ */ jsx(
2193
- "span",
2194
- {
2195
- 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",
2196
- style: { color: cat.color },
2197
- children: tag.name
2198
- },
2199
- index
2200
- )) })
2201
- ] }, cat.id);
2202
- }) }) : /* @__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." })
2203
- ] })
2204
- ] })
2087
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 overflow-y-auto 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",
2099
+ {
2100
+ onClick: () => setExpandedCategories((prev) => __spreadProps(__spreadValues({}, 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`
2108
+ },
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
+ ]
2147
+ }
2148
+ ),
2149
+ /* @__PURE__ */ jsx(
2150
+ "div",
2151
+ {
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
+ className: "text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300",
2157
+ style: {
2158
+ color: cat.color,
2159
+ background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
2160
+ borderColor: `${cat.color}28`
2161
+ },
2162
+ children: tag.name
2163
+ },
2164
+ index
2165
+ )) }) })
2166
+ }
2167
+ )
2168
+ ] }, cat.id);
2169
+ }) })
2170
+ ] })
2171
+ ]
2172
+ }
2173
+ )
2205
2174
  ] }) });
2206
2175
  }
2207
2176
  function useScriptBreakdownScene(options) {
@@ -2461,6 +2430,7 @@ function useScriptBreakdownScene(options) {
2461
2430
  useEffect(() => {
2462
2431
  const doBulkCreate = async () => {
2463
2432
  if (blocks.length === 0) return;
2433
+ if (options.preLoadedTagsLoading) return;
2464
2434
  if (autoTaggedSceneRef.current === options.scene_url) return;
2465
2435
  const hasPreloadedTags = options.preLoadedTags && options.preLoadedTags.length > 0;
2466
2436
  autoTaggedSceneRef.current = options.scene_url;
@@ -2468,7 +2438,12 @@ function useScriptBreakdownScene(options) {
2468
2438
  await bulkCreateTags();
2469
2439
  };
2470
2440
  doBulkCreate();
2471
- }, [blocks, options.scene_url, options.preLoadedTags]);
2441
+ }, [
2442
+ blocks,
2443
+ options.scene_url,
2444
+ options.preLoadedTags,
2445
+ options.preLoadedTagsLoading
2446
+ ]);
2472
2447
  const clearSelection = useCallback(() => {
2473
2448
  var _a;
2474
2449
  setSelectionMenu(null);