init

src/components/engine/DesignSection.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+
+/**
+ * Collapsible section wrapper for engine design input groups.
+ */
+export default function DesignSection({ title, children, defaultOpen = true }) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className="border border-slate-700 rounded-lg overflow-hidden mb-4">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center justify-between px-4 py-3 bg-slate-800 hover:bg-slate-700 text-left transition-colors"
+      >
+        <span className="text-sm font-semibold text-slate-200">{title}</span>
+        <span className="text-slate-400 text-xs select-none">{open ? '▲' : '▼'}</span>
+      </button>
+      {open && (
+        <div className="p-4 bg-slate-900 space-y-3">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}