@vishu1301/script-writing 1.2.8 → 1.3.0

package/dist/index.cjs

@@ -433,7 +433,14 @@ function ScreenplayEditorView({
           }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0 relative px-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[1px] h-6 bg-zinc-200/80 mx-2 hidden sm:block rounded-full" }),
-            showPdfImport && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(PdfImporter, { disabled: isLocked, onScriptImported: handleScriptImport, children: /* @__PURE__ */ jsxRuntime.jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-[18px] h-[18px]" }) }) }),
+            showPdfImport && !isLocked && /* @__PURE__ */ jsxRuntime.jsx(
+              PdfImporter,
+              {
+                disabled: isLocked,
+                onScriptImported: handleScriptImport,
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { title: "Import Script", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "w-[18px] h-[18px]" }) })
+              }
+            ),
             onToggleLock && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -1743,47 +1750,40 @@ var handleSyncWithCloud = (blocks, sceneNumbers, onSaveAsSbx, project_name) => {
     }
   }
 };
-
-// app/types/script-breakdown.types.tsx
 var CATEGORIES = [
-  { id: "CAST", label: "Cast", color: "#7C3AED", hex: "#A78BFA" },
-  { id: "PROP", label: "Prop", color: "#FF6A00", hex: "#FFB86B" },
-  { id: "COSTUME", label: "Costume", color: "#FF2E93", hex: "#FF8AC2" },
-  { id: "VEHICLE", label: "Vehicle", color: "#00A6FF", hex: "#6ED6FF" },
-  { id: "SET_PROP", label: "Set Prop", color: "#00C853", hex: "#69F0AE" },
-  { id: "EXTRA", label: "Extra", color: "#00B8D4", hex: "#62EFFF" },
-  { id: "LOCATION", label: "Location", color: "#FFB300", hex: "#FFE082" },
-  { id: "SUBLOCATION", label: "Sublocation", color: "#004CFF", hex: "#004CFF" },
-  { id: "OTHER", label: "Other", color: "#9E9E9E", hex: "#E0E0E0" }
+  { id: "CAST", label: "Cast", color: "#F97316", hex: "#FDBA74", icon: lucideReact.Users },
+  { id: "PROP", label: "Prop", color: "#7C3AED", hex: "#C4B5FD", icon: lucideReact.Box },
+  { id: "COSTUME", label: "Costume", color: "#DB2777", hex: "#F9A8D4", icon: lucideReact.Shirt },
+  { id: "VEHICLE", label: "Vehicle", color: "#2563EB", hex: "#93C5FD", icon: lucideReact.Car },
+  { id: "SET_PROP", label: "Set Prop", color: "#92400E", hex: "#FCD34D", icon: lucideReact.Armchair },
+  { id: "EXTRA", label: "Extra", color: "#F59E0B", hex: "#FDE68A", icon: lucideReact.UserPlus },
+  { id: "LOCATION", label: "Location", color: "#059669", hex: "#6EE7B7", icon: lucideReact.MapPin },
+  { id: "SUBLOCATION", label: "Sublocation", color: "#65A30D", hex: "#BEF264", icon: lucideReact.Map }
+  // { id: "OTHER", label: "Other", color: "#475569", hex: "#CBD5F5", icon: Tags }
 ];
-var PopcornIcon = ({ isSummarizing }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: `w-6 h-6 transition-all duration-500 ${isSummarizing ? "animate-cook" : "group-hover:scale-110 group-hover:-rotate-12"}`,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          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",
-          stroke: "#facc15",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { stroke: "#ef4444", strokeWidth: "2", children: [
-        /* @__PURE__ */ jsxRuntime.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" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 22 9 8", strokeWidth: "1" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 22 1-14", strokeWidth: "1" })
+var CinemaAIIcon = ({ isProcessing }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className: `w-full h-full stroke-[#1e769c] ${isProcessing ? "animate-[spin_2s_linear_infinite]" : ""}`,
+      fill: "none",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 2v20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 2v20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 7h5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 17h5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 17h5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 7h5" })
       ] })
-    ]
-  }
-);
+    }
+  ) });
+};
 var SummarizeButton = ({
   onSummarize,
   isSummarizing
@@ -1793,140 +1793,27 @@ var SummarizeButton = ({
     {
       onClick: onSummarize,
       disabled: isSummarizing,
-      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]"}`,
+      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]"}`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition duration-700", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "absolute inset-0 blur-3xl opacity-20",
-            style: {
-              backgroundImage: "conic-gradient(from 0deg at 50% 50%, #c084fc, transparent 60%, #fb7185, transparent 90%)",
-              animation: "custom-spin 10s linear infinite"
-            }
-          }
-        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: `absolute inset-0 transition-opacity duration-700 ${isSummarizing ? "opacity-100" : "opacity-0"}`,
-            style: {
-              backgroundImage: "radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1), transparent 70%)"
-            }
+            className: `absolute inset-0 rounded-[inherit] ${isSummarizing ? "bg-[linear-gradient(135deg,#d5f1f8_0%,#b0e3f1_100%)]" : "bg-[linear-gradient(135deg,#eefafd_0%,#d5f1f8_100%)]"}`
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes custom-spin {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-          }
-          @keyframes kernel-pop {
-            0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
-            10% { opacity: 1; transform: translate(var(--tx1), var(--ty1)) scale(1.3) rotate(45deg); }
-            40% { transform: translate(var(--tx2), var(--ty2)) scale(1) rotate(180deg); opacity: 1; }
-            100% { transform: translate(var(--tx3), var(--ty3)) scale(0.4) rotate(360deg); opacity: 0; }
-          }
-          @keyframes icon-cook {
-            0%, 100% { transform: scale(1.1) translateY(0); }
-            50% { transform: scale(0.9, 1.1) translateY(-3px) rotate(3deg); }
-          }
-          .animate-kernel { 
-            animation: kernel-pop var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
-            animation-delay: var(--delay);
-            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); /* Added shadow for visibility */
-          }
-          .animate-cook { animation: icon-cook 0.3s ease-in-out infinite; }
-        ` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopcornIcon, { isSummarizing }),
-            isSummarizing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "animate-kernel absolute w-4 h-4",
-                  style: {
-                    "--dur": "1.2s",
-                    "--delay": "0s",
-                    "--tx1": "-18px",
-                    "--ty1": "-22px",
-                    "--tx2": "-28px",
-                    "--ty2": "-28px",
-                    "--tx3": "-38px",
-                    "--ty3": "12px"
-                  },
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      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",
-                      fill: "#FBBF24",
-                      stroke: "#F59E0B",
-                      strokeWidth: "0.5"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "animate-kernel absolute w-3.5 h-3.5",
-                  style: {
-                    "--dur": "1.5s",
-                    "--delay": "0.3s",
-                    "--tx1": "18px",
-                    "--ty1": "-28px",
-                    "--tx2": "28px",
-                    "--ty2": "-38px",
-                    "--tx3": "38px",
-                    "--ty3": "18px"
-                  },
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      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",
-                      fill: "#FDE68A",
-                      stroke: "#FBBF24",
-                      strokeWidth: "0.5"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "animate-kernel absolute w-4 h-4",
-                  style: {
-                    "--dur": "1.8s",
-                    "--delay": "0.7s",
-                    "--tx1": "-2px",
-                    "--ty1": "-28px",
-                    "--tx2": "5px",
-                    "--ty2": "-48px",
-                    "--tx3": "10px",
-                    "--ty3": "18px"
-                  },
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      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",
-                      fill: "#FEF3C7"
-                    }
-                  )
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              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"}`,
-              children: isSummarizing ? "Summarizing..." : "Summarize Scene"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white/40 to-transparent" })
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CinemaAIIcon, { isProcessing: isSummarizing }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start leading-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-[#1d5b79] tracking-[0.01em]", children: isSummarizing ? "Analyzing Scene..." : "Summarize Scene" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `text-[9px] font-medium uppercase tracking-[0.12em] mt-1 ${isSummarizing ? "text-[#2092ba]" : "text-[#3cafd4]"}`,
+                children: isSummarizing ? "AI Engine Active" : ""
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -1952,6 +1839,9 @@ function ScriptBreakdownSceneView({
   isSummarizing,
   aiSummarized = false
 }) {
+  const [expanded, setExpanded] = react.useState(false);
+  const [expandedCategories, setExpandedCategories] = react.useState({});
+  const [isSidebarOpen, setIsSidebarOpen] = react.useState(false);
   const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
   react.useEffect(() => {
     const fontId = "google-font-courier-prime";
@@ -2041,8 +1931,8 @@ function ScriptBreakdownSceneView({
     }
     return nodes;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-8 items-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center max-w-6xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 min-h-screen", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -2115,10 +2005,10 @@ function ScriptBreakdownSceneView({
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx(
-                                  "div",
+                                  cat.icon,
                                   {
-                                    className: "w-2 h-2 rounded-full shadow-sm group-hover:scale-125 transition-transform duration-300",
-                                    style: { backgroundColor: cat.hex }
+                                    className: "w-4 h-4 group-hover:scale-110 transition-transform duration-300",
+                                    style: { color: cat.color }
                                   }
                                 ),
                                 cat.label
@@ -2181,52 +2071,131 @@ function ScriptBreakdownSceneView({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 sticky top-6", children: [
-      !aiSummarized && /* @__PURE__ */ jsxRuntime.jsx(
-        summarize_button_default,
-        {
-          isSummarizing,
-          onSummarize
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
-          "Tags",
-          /* @__PURE__ */ jsxRuntime.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 })
-        ] }),
-        tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
-          if (cat.id === "SUBLOCATION" && !hasLocationTag) return null;
-          const catTags = Array.from(
-            new Map(
-              tags.filter((t) => t.category_id === cat.id).map((tag) => [tag.name.toLowerCase(), tag])
-            ).values()
-          );
-          if (catTags.length === 0) return null;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.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: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "w-2 h-2 rounded-full shadow-sm",
-                  style: { backgroundColor: cat.hex }
-                }
-              ),
-              cat.label
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsSidebarOpen(true),
+        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",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "h-6 w-6" }),
+          tags.length > 0 && /* @__PURE__ */ jsxRuntime.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 })
+        ]
+      }
+    ),
+    isSidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity xl:hidden",
+        onClick: () => setIsSidebarOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `fixed xl:absolute top-0 right-0 z-50 h-screen xl: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"}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 flex h-screen max-h-screen w-full flex-col border-l border-l-[#eefafd] bg-white p-3 py-5", children: [
+          !aiSummarized && /* @__PURE__ */ jsxRuntime.jsx(
+            summarize_button_default,
+            {
+              isSummarizing,
+              onSummarize
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-3 py-5 my-5 border-t border-t-[#eefafd] flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between mb-6 shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Tags, { className: "h-4 w-4 text-[#15607b]" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[12px] font-semibold uppercase tracking-[0.28em] text-[#134a61]", children: "Breakdown" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.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 }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                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",
-                style: { color: cat.color },
-                children: tag.name
-              },
-              index
-            )) })
-          ] }, cat.id);
-        }) }) : /* @__PURE__ */ jsxRuntime.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." })
-      ] })
-    ] })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 overflow-y-auto custom-scrollbar", children: CATEGORIES.map((cat) => {
+              const catTags = tags.filter((t) => t.category_id === cat.id);
+              if (!catTags.length) return null;
+              const isExpanded = expandedCategories[cat.id];
+              const uniqueTags = Array.from(
+                new Map(
+                  catTags.map((tag) => [tag.name.toLowerCase(), tag])
+                ).values()
+              );
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    onClick: () => setExpandedCategories((prev) => __spreadProps(__spreadValues({}, prev), {
+                      [cat.id]: !prev[cat.id]
+                    })),
+                    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]",
+                    style: {
+                      background: `linear-gradient(135deg, rgba(255,255,255,0.92), ${cat.hex}18)`,
+                      boxShadow: `0 16px 36px ${cat.hex}14, inset 0 1px 0 rgba(255,255,255,0.9)`,
+                      border: `1px solid ${cat.hex}50`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+                          style: {
+                            background: `radial-gradient(circle at 15% 20%, ${cat.hex}24, transparent 38%)`
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/70 backdrop-blur-md",
+                          style: {
+                            background: `linear-gradient(135deg, ${cat.color}22, rgba(255,255,255,0.75))`,
+                            boxShadow: `0 10px 22px ${cat.color}14`
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(cat.icon, { className: "h-4 w-4", color: cat.color })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "relative text-[13px] font-semibold tracking-[0.01em]",
+                          style: { color: cat.color },
+                          children: cat.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.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 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.ChevronDown,
+                        {
+                          className: `relative h-4 w-4 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${isExpanded ? "rotate-180" : ""}`,
+                          style: { color: cat.color }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    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"}`,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-start gap-2 py-2", children: uniqueTags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "text-[11px] font-semibold px-3 py-1.5 rounded-full border backdrop-blur-md transition-all duration-300",
+                        style: {
+                          color: cat.color,
+                          background: `linear-gradient(145deg, ${cat.color}18, rgba(255,255,255,0.88))`,
+                          borderColor: `${cat.color}28`
+                        },
+                        children: tag.name
+                      },
+                      index
+                    )) }) })
+                  }
+                )
+              ] }, cat.id);
+            }) })
+          ] })
+        ] })
+      }
+    )
   ] }) });
 }
 function useScriptBreakdownScene(options) {