Merge pull request #114 from Xenial-Devil/ss-branch-7

ss-branch-7

Author: isubroto

bin/cli.js

@@ -102,39 +102,40 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.1",
+    "@modelcontextprotocol/sdk": "^1.25.2",
     "@monaco-editor/react": "^4.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "glob": "^12.0.0",
-    "monaco-editor": "^0.54.0",
-    "react-resizable-panels": "^3.0.6",
+    "glob": "^13.0.0",
+    "monaco-editor": "^0.55.1",
+    "react-hook-form": "^7.71.0",
+    "react-resizable-panels": "^4.4.0",
     "rechart": "^0.0.1",
-    "recharts": "^3.4.1",
+    "recharts": "^3.6.0",
     "tailwind-merge": "^3.4.0"
   },
   "optionalDependencies": {
-    "lucide-react": "^0.554.0"
+    "lucide-react": "^0.562.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.17",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.6",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.0.6",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^8.47.0",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "autoprefixer": "^10.4.22",
-    "eslint": "^9.39.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "postcss": "^8.5.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "sass": "^1.94.1",
-    "tailwindcss": "^4.1.17",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sass": "^1.97.2",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package-lock.json

@@ -17,7 +17,7 @@ function App() {
         variant="solid"
         animation="slide"
       >
-        <div className="min-h-screen transition-colors duration-300">
+        <div className="min-h-screen transition-colors duration-300 box-border">
           {/* Header */}
           <header className="glass sticky top-0 z-50 border-b border-border/50">
             <div className="container mx-auto px-4 py-4 flex items-center justify-between">

package.json

@@ -18,15 +18,26 @@ export const accordionVariants = cva(
         glass:
           "bg-background/30 backdrop-blur-xl border border-white/10 shadow-2xl hover:border-white/20 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500",
       },
+      size: {
+        sm: "rounded-xl",
+        md: "rounded-2xl",
+        lg: "rounded-3xl",
+      },
+      orientation: {
+        vertical: "flex flex-col",
+        horizontal: "flex flex-row",
+      },
     },
     defaultVariants: {
       variant: "default",
+      size: "md",
+      orientation: "vertical",
     },
   }
 );
 
 export const accordionItemVariants = cva(
-  "group relative w-full overflow-hidden transition-all duration-300 ease-out border-b border-border/30 last:border-b-0 backdrop-blur-sm shadow-sm hover:shadow-lg transition-shadow isolate before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-primary/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
+  "group relative w-full overflow-hidden transition-all duration-300 ease-out backdrop-blur-sm shadow-sm hover:shadow-lg transition-shadow isolate before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-primary/5 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
   {
     variants: {
       isOpen: {
@@ -37,41 +48,105 @@ export const accordionItemVariants = cva(
         true: "opacity-50 cursor-not-allowed pointer-events-none",
         false: "",
       },
+      orientation: {
+        vertical: "border-b border-border/30 last:border-b-0",
+        horizontal: "border-r border-border/30 last:border-r-0 flex-1",
+      },
     },
     defaultVariants: {
       isOpen: false,
       disabled: false,
+      orientation: "vertical",
     },
   }
 );
 
 export const accordionHeaderVariants = cva(
-  "w-full flex justify-between items-center cursor-pointer transition-all duration-300 px-6 py-4 gap-4 relative isolate hover:scale-[1.01] active:scale-[0.99]",
+  "w-full flex justify-between items-center cursor-pointer transition-all duration-300 gap-4 relative isolate hover:scale-[1.01] active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   {
     variants: {
       isOpen: {
         true: "bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 border-b border-border/50 shadow-sm before:absolute before:inset-0 before:bg-gradient-to-r before:from-primary/10 before:via-transparent before:to-accent/10 before:opacity-50",
         false:
           "hover:bg-muted/30 after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-muted/20 after:to-transparent after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-300",
       },
+      size: {
+        sm: "px-4 py-2 text-sm",
+        md: "px-6 py-4 text-base",
+        lg: "px-8 py-6 text-lg",
+      },
+      iconPosition: {
+        left: "flex-row-reverse",
+        right: "flex-row",
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "",
+      },
     },
     defaultVariants: {
       isOpen: false,
+      size: "md",
+      iconPosition: "right",
+      disabled: false,
     },
   }
 );
 
 export const accordionContentVariants = cva(
-  "w-full px-6 overflow-hidden transition-all duration-500 ease-in-out bg-card/20",
+  "w-full overflow-hidden bg-card/20",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const accordionContentInnerVariants = cva(
+  "text-muted-foreground leading-relaxed transition-all duration-300",
+  {
+    variants: {
+      isOpen: {
+        true: "translate-y-0 opacity-100",
+        false: "translate-y-2 opacity-0",
+      },
+      size: {
+        sm: "px-4 py-2",
+        md: "px-6 py-4",
+        lg: "px-8 py-6",
+      },
+    },
+    defaultVariants: {
+      isOpen: false,
+      size: "md",
+    },
+  }
+);
+
+export const accordionIconVariants = cva(
+  "relative shrink-0 transition-all duration-500 ease-out",
   {
     variants: {
       isOpen: {
-        true: "max-h-[500px] opacity-100 py-4",
-        false: "max-h-0 opacity-0 py-0",
+        true: "rotate-180 text-primary",
+        false: "rotate-0 text-muted-foreground group-hover:text-foreground",
+      },
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
       },
     },
     defaultVariants: {
       isOpen: false,
+      size: "md",
     },
   }
-);
+);